[ { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/custom.md", "content": "---\nname: Custom issue template\nabout: Describe this issue template's purpose here.\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/workflows/docs-deploy.yml", "content": "name: Deploy Next.js SSG site to Pages\r\n\r\non:\r\n # Runs on pushes targeting the default branch\r\n push:\r\n branches: ['main']\r\n\r\n # Allows you to run this workflow manually from the Actions tab\r\n workflow_dispatch:\r\n\r\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\r\npermissions:\r\n contents: read\r\n pages: write\r\n id-token: write\r\n\r\n# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.\r\n# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.\r\nconcurrency:\r\n group: 'pages'\r\n cancel-in-progress: false\r\n\r\njobs:\r\n # Build job\r\n build:\r\n runs-on: ubuntu-latest\r\n steps:\r\n - name: Checkout\r\n uses: actions/checkout@v4\r\n - name: Setup pnpm\r\n uses: pnpm/action-setup@v4\r\n with:\r\n version: 9.5.0\r\n - name: Setup Node\r\n uses: actions/setup-node@v4\r\n with:\r\n node-version: '20'\r\n cache: 'pnpm'\r\n - name: Setup Pages\r\n uses: actions/configure-pages@v5\r\n - name: Install dependencies\r\n run: pnpm install\r\n - name: Build Next.js\r\n run: |\r\n cd apps/docs \r\n pnpm build\r\n - name: Upload artifact\r\n uses: actions/upload-pages-artifact@v3\r\n with:\r\n path: ./apps/docs/dist\r\n - name: Deploy to GitHub Pages\r\n id: deployment\r\n uses: actions/deploy-pages@v4\r\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n\n.next\n.turbo\n\n\n# Contentlayer\n.contentlayer\n" }, { "path": ".npmrc", "content": "auto-install-peers = true\r\nnode-linker=hoisted" }, { "path": ".prettierrc", "content": "{\n \"tabWidth\": 2,\n \"semi\": false,\n \"printWidth\": 80,\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"bracketSameLine\": false\n}\n" }, { "path": "LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2023 Lerte Smith\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE." }, { "path": "README.md", "content": "

\n \n \"Actify\n \n

\n\n

\n \n \"License\"\n \n \"visitors\"\n

\n\n---\n\n## 🌟Overview\n\nWelcome to Actify, an open-source React Components Library designed to accelerate your React application development. Actify leverages TypeScript, Tailwind CSS, Reat-Aria, Framer Motion, Material Design 3, and more to provide a comprehensive set of modern and customizable UI components.\n\n## ✨ Features\n\n- **TypeScript**: Benefit from enhanced developer experience and static typing.\n- **Tailwind CSS**: Embrace a utility-first CSS framework for effortless and flexible styling.\n- **React-Aria**: React Aria implements accessibility support according to the WAI-ARIA specification, published by the W3C.\n- **Framer Motion**: Bring fluid animations and transitions to your components with Framer Motion.\n- **Material Design 3**: Implement the latest Material Design principles for a cohesive and visually appealing interface.\n\n## 🚀 Getting Started\n\n### 📦 Installation\n\n```bash\n# with pnpm\npnpm add actify\n# with yarn\nyarn add actify\n# with npm\nnpm install actify\n```\n\n### 💻 Usage\n\n```jsx\nimport { Button } from 'actify'\n\nexport default () => {\n return \n}\n```\n\nRefer to the [documentation](https://actifyjs.com/getting-started/installation) for in-depth information on each component and their usage.\n\n## 📚 Documentation\n\nExplore our [documentation](https://actifyjs.com/getting-started/installation) for detailed insights, examples, and customization options for each component in the Actify library.\n\n## 🚥 Roadmap\n\nOur goals is convert all [Material Web](https://github.com/material-components/material-web) components to React Components, not just a React wrapped components.\n\n| Component | Web component | React Component |\n| ------------------- | ------------- | --------------- |\n| Ripple | | ✅ |\n| Elevation | | ✅ |\n| Focus ring | | ✅ |\n| Icon | | ✅ |\n| Button | | ✅ |\n| Icon button | | ✅ |\n| Checkbox | | ✅ |\n| Slider | | ✅ |\n| Switch | | ✅ |\n| TextField | | ✅ |\n| Progress indicators | | ✅ |\n| Radio | | ✅ |\n| Divider | | ✅ |\n| Menu | | ✅ |\n| Dialog | | ✅ |\n| Select | | ✅ |\n| SegmentedButton | | ✅ |\n| SegmentedButtonSet | | ✅ |\n\n## 🤝 Contributing\n\nContributions are always welcome!\nThanks to everyone who has already contributed to `actify` !\n\n\n\n## 📜 License\n\nActify React Components Library is licensed under the MIT License - see the [MIT licensed](./LICENSE.md) file for details..\n\n## 🙏 Acknowledgments\n\n- Special thanks to our contributors and the open-source community for making Actify possible.\n- Highly inspired by [Vuetify](https://vuetifyjs.com) for its impactful contributions to UI design and development trends.\n\n## 📧 Support\n\nIf you have any questions or need assistance, feel free to reach out to us at [hello@actifyjs.com](mailto:hello@actifyjs.com).\n\nHappy coding with Actify! 🚀\n" }, { "path": "apps/docs/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n/dist/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "apps/docs/content/components/accordion.md", "content": "---\r\ntitle: Accordion\r\ndescription: Accordion display a list of high-level options that can expand/collapse to reveal more information.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Tips\r\n\r\n`asChild` prop can use to override `Header` style and `Content` style\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ---------- | --------- | ---------------------------------------------------------------------------- | ----------- |\r\n| `open` | `array` | Set which index item is open. eg. [,true] stands for the second item is open | `[]` |\r\n| `multiple` | `boolean` | Allow multiple items to be expanded at the same time. | `undefined` |\r\n" }, { "path": "apps/docs/content/components/app-bars/bottom-app-bar.md", "content": "---\r\ntitle: Bottom app bar\r\ndescription: Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/app-bars/top-app-bar.md", "content": "---\r\ntitle: Top app bars\r\ndescription: The top app bar displays information and actions relating to the current screen.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/autocomplete.md", "content": "---\ntitle: Autocomplete\ndescription: Autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.\n---\n\n## Usage\n\n\n" }, { "path": "apps/docs/content/components/avatar.md", "content": "---\r\ntitle: Avatar\r\ndescription: Avatar is a component that can be used to display a user's avatar.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/badges.md", "content": "---\r\ntitle: Badge\r\ndescription: Badges show notifications, counts, or status information on navigation items and icons\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ------- | ----------------- | ------------------------- | ------- |\r\n| `value` | `string` `number` | The content of the badge. | `null` |\r\n| `color` | `string` | The color of the badge. | `error` |\r\n" }, { "path": "apps/docs/content/components/before-after.md", "content": "---\r\ntitle: Before After\r\ndescription: Before after show a before and after image of a product.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| --------- | ----- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\r\n| `before` | `url` | original image url | `null` |\r\n| `after` | `url` | after image url | `null` |\r\n| `bgImage` | `url` | after image background image | |\r\n" }, { "path": "apps/docs/content/components/buttons/button.md", "content": "---\r\ntitle: Button\r\ndescription: Buttons have label text that describes the action that will occur if a user taps a button.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n> Notice! Button component under react-router Link component will cause refresh page.\r\n\r\n- Solution 1: add onPress(e=>e.preventDefault()) to Button component\r\n- Solution 2: put Link component under Button component\r\n\r\n## Props\r\n\r\n| Name | Type | Default | Description |\r\n| ------------------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| form | `string` | — | The
element to associate the button with. The value of this attribute must be the id of a in the same document. |\r\n| formAction | `string` | — | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |\r\n| formEncType | `string` | — | Indicates how to encode the form data that is submitted. |\r\n| formMethod | `string` | — | Indicates the HTTP method used to submit the form. |\r\n| formNoValidate | `boolean` | — | Indicates that the form is not to be validated when it is submitted. |\r\n| formTarget | `string` | — | Overrides the target attribute of the button's form owner. |\r\n| name | `string` | — | Submitted as a pair with the button's value as part of the form data. |\r\n| value | `string` | — | The value associated with the button's name when it's submitted with the form data. |\r\n| isPending | `boolean` | — | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |\r\n| isDisabled | `boolean` | — | Whether the button is disabled. |\r\n| autoFocus | `boolean` | — | Whether the element should receive focus on render. |\r\n| type | `button` `submit` `reset` | 'button' | The behavior of the button when used in an HTML form. |\r\n| preventFocusOnPress | `boolean` | — | Whether to prevent focus from moving to the button when pressing it. |\r\n| children | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |\r\n| className | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |\r\n| style | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |\r\n| color | `primary` `secondary` `tertiary` `error` | 'primary' | |\r\n| variant | `elevated` `filled` `tonal` `outlined` `text` | 'filled' | |\r\n\r\n## Events\r\n\r\n| Name | Type | Description |\r\n| --------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |\r\n| `onPress` | `(e: PressEvent) => void` | Handler that is called when the press is released over the target. |\r\n| `onPressStart` | `(e: PressEvent) => void` | Handler that is called when a press interaction starts. |\r\n| `onPressEnd` | `(e: PressEvent) => void` | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |\r\n| `onPressChange` | `(e: PressEvent) => void` | Handler that is called when the press state changes. |\r\n| `onPressUp` | `(e: PressEvent) => void` | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |\r\n| `onFocus` | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. |\r\n| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |\r\n| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |\r\n| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |\r\n| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |\r\n| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |\r\n| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |\r\n| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |\r\n\r\n### Layout\r\n\r\n| Name | Type | Description |\r\n| ------ | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `slot` | `string` `null` | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent. |\r\n" }, { "path": "apps/docs/content/components/buttons/fab.md", "content": "---\r\ntitle: Floating action buttons\r\ndescription: Floating action buttons (FABs) help people take primary actions\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/buttons/icon-button.md", "content": "---\r\ntitle: Icon buttons\r\ndescription: Icon buttons help people take minor actions with one tap\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/buttons/segmented-button.md", "content": "---\r\ntitle: Segmented button\r\ndescription: Segmented buttons help people select options, switch views, or sort elements\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| -------- | --------- | ----------- | ------- |\r\n| selected | `boolean` | | `false` |\r\n" }, { "path": "apps/docs/content/components/cards.md", "content": "---\r\ntitle: Cards\r\ndescription: Cards display content and actions about a single subject\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## With Ripple\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ------ | ------------------- | --------------------- | ------- |\r\n| `type` | `filled` `outlined` | The type of the Card. | null |\r\n" }, { "path": "apps/docs/content/components/carousel.md", "content": "---\r\ntitle: Carousel\r\ndescription: Carousels show a collection of items that can be scrolled on and off the screen\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ---------- | ------------------ | ----------------------------------------------------------- | ------- |\r\n| autoPlay | `boolean` | Sets the autoplay mode for carousel | `false` |\r\n| control | `boolean` | Show prev and next button for carousel | `false` |\r\n| current | `number` | Sets carousel start play index | `0` |\r\n| indicator | `boolean` | Show the indicator for carousel | `false` |\r\n| infinite | `boolean` | Sets the infinite mode for carousel | `false` |\r\n| interval | `number` | Sets the interval duration for autoplay mode in miliseconds | `3000` |\r\n| `children` | `React.React.Node` | | `null` |\r\n" }, { "path": "apps/docs/content/components/checkbox.md", "content": "---\r\ntitle: Checkbox\r\ndescription: Checkboxes let users select one or more items from a list, or turn an item on or off\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ----------------- | ----------------------------------------- | ---------------------------------------- | ------- |\r\n| `color` | `primary` `secondary` `tertiaray` `error` | The color of the checkbox | `null` |\r\n| `value` | `boolean` | Checkbox value | `null` |\r\n| `isDisabled` | `boolean` | Whether the checkbox is disabled | `false` |\r\n| `isSelected` | `boolean` | whether the checkbox is selected | `false` |\r\n| `isIndeterminate` | `boolean` | whether the item is toggled on or off. | `false` |\r\n| `defaultSelected` | `boolean` | whether the checkbox is default selected | `false` |\r\n\r\n## Events\r\n\r\n| Events | Description |\r\n| ---------- | ------------------------ |\r\n| `onChange` | fired when value changed |\r\n" }, { "path": "apps/docs/content/components/chips.md", "content": "---\r\ntitle: Chips\r\ndescription: Chips help people enter information, make selections, filter content, or trigger actions\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Prop | Type | Description | Default |\r\n| -------- | -------- | ---------------------- | ------- |\r\n| `lable` | `string` | The label of the chip | `null` |\r\n| `type` | `string` | The type of the chip | `null` |\r\n| `href` | `string` | The href of the chip | `null` |\r\n| `target` | `string` | The target of the chip | `null` |\r\n" }, { "path": "apps/docs/content/components/date-pickers.md", "content": "---\r\ntitle: Date pickers\r\ndescription: Date pickers let people select a date, or a range of dates\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ---------------- | --------- | ---------------------------- | ------------ |\r\n| `asSingle` | `boolean` | render as single date picker | `false` |\r\n| `useRange` | `boolean` | use range mode | `true` |\r\n| `placeholder` | `string` | placeholder text | `null` |\r\n| `separator` | `string` | separator between range date | `~` |\r\n| `showShortcuts` | `boolean` | show left shortcuts date | `false` |\r\n| `showFooter` | `boolean` | show footer actions | `false` |\r\n| `displayFormat` | `string` | display format of date | `DD/MM/YYYY` |\r\n| `readOnly` | `boolean` | readonly mode | `false` |\r\n| `disabled` | `boolean` | disabled mode | `false` |\r\n| `inputClassName` | `string` | input class name | `null` |\r\n| `startFrom` | `Date` | start date for range mode | `new Date()` |\r\n| `minDate` | `Date` | min date | `null` |\r\n| `maxDate` | `Date` | max date | `null` |\r\n" }, { "path": "apps/docs/content/components/dialogs.md", "content": "---\r\ntitle: Dialogs\r\ndescription: Dialogs provide important prompts in a user flow\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/divider.md", "content": "---\r\ntitle: Divider\r\ndescription: Dividers are thin lines that group content in lists or other containers\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Name | Type | Description | Default |\r\n| ------------ | --------- | ------------------------------------------------------- | ----------- |\r\n| `inset` | `boolean` | add 16px to padding-inline-start and padding-inline-end | `undefined` |\r\n| `insetStart` | `boolean` | add 16px to padding-inline-start | `undefined` |\r\n| `insetEnd` | `boolean` | add 16px to padding-inline-end | `undefined` |\r\n" }, { "path": "apps/docs/content/components/focus-ring.md", "content": "---\r\ntitle: Focus Ring\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n| Name | Type | Description | Default |\r\n| --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | --------- |\r\n| type | `outward` `inward` | The way the focus ring is animated and positioned. | `outward` |\r\n| as | `keyof HTMLElementTagNameMap` `React.ElementType` | Allows for more flexibility when supporting different elements that can act as a FocusRing. | `span` |\r\n| style | `React.CSSProperties` | — | — |\r\n| className | `string` | — | — |" }, { "path": "apps/docs/content/components/label.md", "content": "---\r\ntitle: Label\r\ndescription: Use original html label tag, but prevented text selection when double clicked\r\n---\r\n\r\n## Usage with Checkbox\r\n\r\n\r\n\r\n## Usage with Raido\r\n\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/lists.md", "content": "---\r\ntitle: Lists\r\ndescription: Lists are continuous, vertical indexes of text and images\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Name | Type | Description | Default |\r\n| ------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- |\r\n| `transition` | `Object` | Item hover trantisition is framer motion transition | `null` |\r\n| `children` | `React.ReactNode` | children | `null` |\r\n\r\n## Child\r\n\r\n| Name | Description |\r\n| --------- | ----------- |\r\n| ListItem | List item |\r\n| ListGroup | List group |\r\n" }, { "path": "apps/docs/content/components/menus.md", "content": "---\r\ntitle: Menus\r\ndescription: Menus display a list of choices on a temporary surface\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n### MenuButton\r\n\r\n| Name | Type | Description | Default |\r\n| ------------------- | ------------------- | --------------------------------------------------------------------------- | ------- |\r\n| `label` | `React.ReactNode` | The text to show on the menu button. | — |\r\n| `popoverProps` | `PopoverProps` | Props that allow changing the popover placement, flip behavior, style etc. | — |\r\n\r\n### MenuItem\r\n\r\n| Name | Type | Description | Default |\r\n| ------------------- | --------------------- | --------------------------------------------------------------------------------- | ------- |\r\n| `textValue` | `string` | A string representation of the item's contents, used for features like typeahead. | — |\r\n| `isDisabled` | `boolean` | Whether the item is disabled. | `false` |\r\n| `className` | `string` | — | — |\r\n| `style` | `React.CSSProperties` | — | — |\r\n\r\n## Events\r\n### MenuItem\r\n\r\n| Name | Type | Description |\r\n| ----------------- | --------------------------------- | -------------------------------------------------------- |\r\n| `onAction` | `() => void` | Handler that is called when the item is selected. |\r\n| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |\r\n| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |\r\n| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |" }, { "path": "apps/docs/content/components/navigation/navigation-bar.md", "content": "---\r\ntitle: Navigation bar\r\ndescription: Navigation bars let people switch between UI views on smaller devices\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/navigation/navigation-drawer.md", "content": "---\r\ntitle: Navigation drawer\r\ndescription: Navigation drawers let people switch between UI views on larger devices\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ----------- | ----------------------------- | ------------------------------------------ | ------- |\r\n| `open` | `boolean` | Whether the drawer is open or not | `false` |\r\n| `placement` | `top` `right` `bottom` `left` | Where the drawer should be placed | `left` |\r\n| `asChild` | `boolean` | set true pass any element as the activator | `false` |\r\n" }, { "path": "apps/docs/content/components/navigation/navigation-rail.md", "content": "---\r\ntitle: Navigation rail\r\ndescription: Navigation rails let people switch between UI views on mid-sized devices\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/pagination.md", "content": "---\r\ntitle: Pagination\r\ndescription: Pagination is a component that allows users to navigate between multiple pages.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ------------- | -------- | ------------ | ----------- |\r\n| `currentPage` | `number` | current page | `undefined` |\r\n| `totalPages` | `number` | total page | `undefined` |\r\n\r\n## Events\r\n\r\n| Events | Description |\r\n| -------------- | ------------------------------- |\r\n| `onPageChange` | fired when current page changed |\r\n" }, { "path": "apps/docs/content/components/progress/circular-progress.md", "content": "---\r\ntitle: CircularProgress\r\ndescription: Circular progress is a visual indicator that communicates the status of a process.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Name | Type | Description | Default |\r\n| ----------------- | ----------------------------------------- | ----------------------------------------------- | ----------- |\r\n| `size` | `xs` `sm` `md` `lg` `xl` `2xl` | The size of the circle | `sm` |\r\n| `value` | `number` | set the value of progress 0-100 | `undefined` |\r\n| `color` | `primary` `secondary` `tertiaray` `error` | set the color of progress circle | `primary` |\r\n| `isIndeterminate` | `boolean` | whether determinate circular progress indicator | `false` |\r\n" }, { "path": "apps/docs/content/components/progress/linear-progress.md", "content": "---\r\ntitle: LinearProgress\r\ndescription: Linear progress indicators visualize the linear progress of a task, where the progress is displayed as a bar.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Name | Type | Description | Default |\r\n| ----------------- | ----------------------------------------- | --------------------------------------------- | ----------- |\r\n| `value` | `number` | set the value of progress 0-100 | `undefined` |\r\n| `color` | `primary` `secondary` `tertiaray` `error` | set the color of progress bar | `primary` |\r\n| `isIndeterminate` | `boolean` | whether determinate linear progress indicator | `false` |\r\n" }, { "path": "apps/docs/content/components/radio.md", "content": "---\r\ntitle: Radio button\r\ndescription: Radio buttons let people select one option from a set of options\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ------------- | ----------------------- | ----------------------------------------------------------------- | ----------- |\r\n| `value` | `string` | The value of the radio button, used when submitting an HTML form. | `null` |\r\n| `children` | `ReactNode` | The label for the Radio. Accepts any renderable node. | `undefined` |\r\n| `isDisabled` | `boolean` | Whether the radio button is disabled or not. | `undefined` |\r\n| `orientation` | `horizontal` `vertical` | The axis the Radio should align with. | `vertical` |\r\n" }, { "path": "apps/docs/content/components/ripple.md", "content": "---\r\ntitle: Ripple\r\ndescription: Ripples are state layers used to communicate the status of a component or interactive element.\r\n---\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/select.md", "content": "---\r\ntitle: Select\r\ndescription: Select fields components are used for collecting user provided information from a list of options.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Name | Type | Default | Description |\r\n| --------------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |\r\n| `label` | `React.ReactNode` | — | The content to display as the label. |\r\n| `selectedKey` | `Key` | — | The currently selected key in the collection (controlled). |\r\n| `disabledKeys` | `Iterable` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |\r\n| `isOpen` | `boolean` | `false` | Sets the open state of the menu. |\r\n| `isDisabled` | `boolean` | `false` | Whether the input is disabled. |\r\n| `isRequired` | `boolean` | `false` | Whether user input is required on the input before form submission. |\r\n| `isInvalid` | `boolean` | `false` | Whether the input value is invalid. |\r\n| `validationBehavior` | `aria` `native` | `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |\r\n| `validate` | `(value: Key) => ValidationError` `true` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior=\"native\". For realtime validation, use the isInvalid prop instead. |\r\n| `variant` | `filled` `outlined` | `filled` | The type of the Select. |\r\n| `popoverProps` | `PopoverProps` | — | Props that allow changing the popover placement, flip behavior, style etc. |\r\n| `className` | `string` | — | — |\r\n| `style` | `React.CSSProperties` | — | — |\r\n\r\n## Events\r\n\r\n| Name | Type | Description |\r\n| ------------------- | ------------------------------- | ----------------------------------------------------------------- |\r\n| `onSelectionChange` | `(key: Key) => void` | Handler that is called when the selection changes. |\r\n| `onBlur` | `(e: React.FocusEvent) => void` | Handler that is called when the element loses focus. |\r\n| `onFocus` | `(e: React.FocusEvent) => void` | Handler that is called when the element receives focus. |\r\n| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |\r\n| `onOpenChange` | `(isOpened: boolean) => void` | Method that is called when the open state of the menu changes. |\r\n" }, { "path": "apps/docs/content/components/sheets/bottom-sheets.md", "content": "---\r\ntitle: Bottom sheets\r\ndescription: Bottom sheets show secondary content anchored to the bottom of the screen\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Activator Props\r\n\r\n| Props | Type | Description | Default |\r\n| --------- | --------- | ------------------------------------------ | ------- |\r\n| `asChild` | `boolean` | set true pass any element as the activator | `false` |\r\n| `open` | `boolean` | Whether the sheets is open or not | `false` |\r\n" }, { "path": "apps/docs/content/components/sheets/side-sheets.md", "content": "---\r\ntitle: Side sheets\r\ndescription: Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow. They are typically anchored on the right edge of larger screens like tablets and desktops.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| --------- | --------- | ---------------------------- | ------- |\r\n| `divider` | `boolean` | show divider in body content | `false` |\r\n\r\n## Activator Props\r\n\r\n| Props | Type | Description | Default |\r\n| --------- | --------- | ------------------------------------------ | ------- |\r\n| `asChild` | `boolean` | set true pass any element as the activator | `false` |\r\n| `open` | `boolean` | Whether the sheets is open or not | `false` |\r\n" }, { "path": "apps/docs/content/components/sliders.md", "content": "---\r\ntitle: Sliders\r\ndescription: Sliders let users make selections from a range of values\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| -------------- | ----------------------------------------- | -------------------- | ----------- |\r\n| `color` | `primary` `secondary` `tertiaray` `error` | color | `primary` |\r\n| `label` | `string` | label | `undefined` |\r\n| `value` | `number` `number[]` | slider value | `undefined` |\r\n| `labeled ` | `boolean` | show label on thumb | `undefined` |\r\n| `isDisabled` | `boolean` | disable slider | `undefined` |\r\n| `defaultValue` | `number` `number[]` | default slider value | `undefined` |\r\n\r\n## Events\r\n\r\n| Events | Description |\r\n| ---------- | ------------------------ |\r\n| `onChange` | fired when value changed |\r\n" }, { "path": "apps/docs/content/components/snackbar.md", "content": "---\ntitle: Snackbar\ndescription: Snackbars show short updates about app processes at the bottom of the screen\n---\n\n## Usage\n\n\n" }, { "path": "apps/docs/content/components/swiper.md", "content": "---\r\ntitle: Swiper\r\ndescription: Swiper is simple banner slider with a lot of features.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/switch.md", "content": "---\r\ntitle: Switch\r\ndescription: Switches toggle the state of an item on or off\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Name | Type | Default | Description |\r\n| ----------------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `icons` | `boolean` | — | Show x or √ icon |\r\n| `color` | `primary` `secondary` `tertiaray` `error` | — | The color of the switch |\r\n| `defaultSelected` | `boolean` | — | Whether the Switch should be selected (uncontrolled). |\r\n| `isSelected` | `boolean` | — | Whether the Switch should be selected (controlled). |\r\n| `isDisabled` | `boolean` | — | Whether the input is disabled. |\r\n| `isReadOnly` | `boolean` | — | Whether the input can be selected but not changed by the user. |\r\n| `autoFocus` | `boolean` | — | Whether the element should receive focus on render. |\r\n| `name` | `string` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |\r\n| `children` | `string` `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |\r\n| `className` | `string` `(values: SwitchRenderProps & { defaultClassName: string \\| undefined}) => string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |\r\n| `style` | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |\r\n\r\n## Events\r\n\r\n| Name | Type | Description |\r\n| --------------- | --------------------------------- | ----------------------------------------------------------------- |\r\n| `onChange` | `(isSelected: boolean) => void` | Handler that is called when the Switch's selection state changes. |\r\n| `onFocus` | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. |\r\n| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |\r\n| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |\r\n| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |\r\n| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |\r\n| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |\r\n| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |\r\n| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |\r\n" }, { "path": "apps/docs/content/components/table.md", "content": "---\r\ntitle: Table\r\ndescription: Table is a component that allows you to display tabular data.\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n### Table\r\n\r\n| Name | Type | Default | Description |\r\n| ---------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------ |\r\n| children | `ReactNode` | — | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |\r\n| selectionBehavior | `SelectionBehavior` | 'toggle' | How multiple selection should behave in the collection. |\r\n| disabledBehavior | `DisabledBehavior` | 'selection' | Whether disabledKeys applies to all interactions, or only selection. |\r\n| dragAndDropHooks | `DragAndDropHooks` | — | The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table. |\r\n| disabledKeys | `Iterable` | — | A list of row keys to disable. |\r\n| selectionMode | `SelectionMode` | — | The type of selection that is allowed in the collection. |\r\n| disallowEmptySelection | `boolean` | — | Whether the collection allows empty selection. |\r\n| selectedKeys | `'all' \\| Iterable` | — | The currently selected keys in the collection (controlled). |\r\n| defaultSelectedKeys | `'all' \\| Iterable` | — | The initial selected keys in the collection (uncontrolled). |\r\n| sortDescriptor | `SortDescriptor` | — | The current sorted column and direction. |\r\n| className | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |\r\n| style | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |\r\n\r\n### Events\r\n\r\n| Name | Type | Description |\r\n| ----------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\r\n| onRowAction | `(key: Key) => void` | Handler that is called when a user performs an action on the row. |\r\n| onSelectionChange | `(keys: Selection) => void` | Handler that is called when the selection changes. |\r\n| onSortChange | `(descriptor: SortDescriptor) => any` | Handler that is called when the sorted column or direction changes. |\r\n| onScroll | `(e: UIEvent) => void` | Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). |\r\n\r\n### TableHeader\r\n\r\n| Name | Type | Description |\r\n| ------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |\r\n| columns | `object[]` | A list of table columns. |\r\n| children | `ReactNode \\| (item: object) => ReactElement` | A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop. |\r\n| dependencies | `any[]` | Values that should invalidate the column cache when using dynamic collections. |\r\n| className | `string` | The CSS className for the element. A function may be provided to compute the class based on component state. |\r\n| style | `React.CSSProperties` | The inline style for the element. A function may be provided to compute the style based on component state. |\r\n" }, { "path": "apps/docs/content/components/tabs.md", "content": "---\r\ntitle: Tabs\r\ndescription: Tabs organize content across different screens and views\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| -------------------- | ----------------------- | --------------------------- | ------------ |\r\n| `orientation` | `horizontal` `vertical` | The orientation of the tabs | `horizontal` |\r\n| `keyboardActivation` | `automatic` `manual` | keyboard activation | `automatic` |\r\n| `defaultSelectedKey` | `string` \\| `number` | default selected key | `undefined` |\r\n\r\n## Events\r\n\r\n| Events | Description |\r\n| ------------------- | --------------------------- |\r\n| `onSelectionChange` | fired when selected changed |\r\n" }, { "path": "apps/docs/content/components/terminal.md", "content": "---\r\ntitle: Terminal\r\ndescription: Tabs organize content across different screens and views\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n| Props | Type | Description | Default |\r\n| ----------- | ----------------- | -------------- | ------------------- |\r\n| `title` | `string` | terminal title | `Terminal` |\r\n| `lastlogin` | `Date` | last login | `new Date()` |\r\n| `hostname` | `string` | hostname | `Lerte-MacBook-Pro` |\r\n| `username` | `string` | username | `lerte` |\r\n| `children` | `React.ReactNode` | | `null` |\r\n" }, { "path": "apps/docs/content/components/text-fields.md", "content": "---\r\ntitle: Text fields\r\ndescription: Text fields let users enter text into a UI\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n### TextField\r\n\r\n| Name | Type | Default | Description |\r\n| -------------------- | ----------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `label` | `string` | — | Input label |\r\n| `isInvalid` | `boolean` | — | Whether the value is invalid. |\r\n| `isDisabled` | `boolean` | — | Whether the input is disabled. |\r\n| `isReadOnly` | `boolean` | — | Whether the input can be selected but not changed by the user. |\r\n| `isRequired` | `boolean` | — | Whether user input is required on the input before form submission. |\r\n| `validate` | `(value: string) => ValidationError \\| true \\| null \\| undefined` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior=\"native\". For realtime validation, use the isInvalid prop instead. |\r\n| `autoFocus` | `boolean` | — | Whether the element should receive focus on render. |\r\n| `value` | `string` | — | The current value (controlled). |\r\n| `defaultValue` | `string` | — | The default value (uncontrolled). |\r\n| `autoComplete` | `string` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |\r\n| `maxLength` | `number` | — | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). |\r\n| `minLength` | `number` | — | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). |\r\n| `pattern` | `string` | — | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). |\r\n| `type` | `text` `textarea` `search` `url` `tel` `email` `password` `string & {}` | 'text' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). |\r\n| `inputMode` | `none` `text` `tel` `url` `email` `numeric` `decimal` `search` | — | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute). |\r\n| `name` | `string` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |\r\n| `validationBehavior` | `native` `aria` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |\r\n| `children` | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |\r\n| `className` | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |\r\n| `style` | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |\r\n| `variant` | `filled` `outlined` | 'filled' | |\r\n| `suffixText` | `string` | — | |\r\n| `prefixText` | `string` | — | |\r\n| `leadingIcon` | `React.ReactNode` | — | |\r\n| `trailingIcon` | `React.ReactNode` | — | |\r\n\r\n## Events\r\n\r\n| Name | Type | Description |\r\n| -------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `onFocus` | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. |\r\n| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |\r\n| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |\r\n| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |\r\n| `onChange` | `(value: T) => void` | Handler that is called when the value changes. |\r\n| `onCopy` | `ClipboardEventHandler` | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/copy_event). |\r\n| `onPaste` | `ClipboardEventHandler` | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/paste_event). |\r\n| `onCompositionStart` | `CompositionEventHandler` | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). |\r\n| `onSelect` | `ReactEventHandler` | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event). |\r\n| `onBeforeInput` | `FormEventHandler` | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event). |\r\n| `onInput` | `FormEventHandler` | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). |\r\n" }, { "path": "apps/docs/content/components/time-pickers.md", "content": "---\r\ntitle: Time pickers\r\ndescription: Time pickers help users select and set a specific time\r\n---\r\n\r\n## Usage\r\n\r\n\r\n" }, { "path": "apps/docs/content/components/tooltips.md", "content": "---\r\ntitle: Tooltips\r\ndescription: Tooltips display brief labels or messages\r\n---\r\n\r\n## Usage\r\n\r\n\r\n\r\n## Props\r\n\r\n### TooltipTrigger\r\n\r\n| Name | Type | Default | Description |\r\n| ----------- | ----------- | ------- | ------------------------------------------------------------------------------- |\r\n| children | `ReactNode` | — | |\r\n| isDisabled | `boolean` | — | Whether the tooltip should be disabled, independent from the trigger. |\r\n| delay | `number` | 1500 | The delay time for the tooltip to show up. |\r\n| closeDelay | `number` | 500 | The delay time for the tooltip to close. |\r\n| trigger | `focus` | — | By default, opens for both focus and hover. Can be made to open only for focus. |\r\n| isOpen | `boolean` | 12 | Whether the overlay is open by default (controlled). |\r\n| defaultOpen | `boolean` | 0 | Whether the overlay is open by default (uncontrolled). |\r\n\r\n### Tooltip\r\n\r\n| Name | Type | Default | Description |\r\n| ------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| triggerRef | `RefObject` | — | The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone. |\r\n| isEntering | `boolean` | — | Whether the tooltip is currently performing an entry animation. |\r\n| isExiting | `boolean` | — | Whether the tooltip is currently performing an exit animation. |\r\n| UNSTABLE_portalContainer | `Element` | document.body | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. |\r\n| placement | `Placement` | 'top' | The placement of the tooltip with respect to the trigger. |\r\n| containerPadding | `number` | 12 | The placement padding that should be applied between the element and its surrounding container. |\r\n| offset | `number` | 0 | The additional offset applied along the main axis between the element and its anchor element. |\r\n| crossOffset | `number` | 0 | The additional offset applied along the cross axis between the element and its anchor element. |\r\n| shouldFlip | `boolean` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |\r\n| isOpen | `boolean` | — | Whether the element is rendered. |\r\n| arrowBoundaryOffset | `number` | 0 | The minimum distance the arrow's edge should be from the edge of the overlay element. |\r\n| defaultOpen | `boolean` | — | Whether the overlay is open by default (uncontrolled). |\r\n| children | `ReactNode \\| (values: TooltipRenderProps & { defaultChildren: ReactNode \\| undefined }) => ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |\r\n| className | `string \\| (values: TooltipRenderProps & { defaultClassName: string \\| undefined}) => string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |\r\n| style | `CSSProperties \\| (values: TooltipRenderProps & {defaultStyle: CSSProperties}) => CSSProperties \\| undefined` | — | The inline style for the element. A function may be provided to compute the style based on component state. |\r\n" }, { "path": "apps/docs/content/getting-started/icons.md", "content": "---\r\ntitle: Icon\r\n---\r\n\r\n> Icons are based on Material Icons\r\n\r\n\r\n" }, { "path": "apps/docs/content/getting-started/installation.md", "content": "---\r\ntitle: Installation\r\n---\r\n\r\n## Prerequisites\r\n\r\n> Actify is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation Guide.\r\n\r\n## Install\r\n\r\n\r\n\r\n\r\n## app.css\r\n\r\n```css\r\n@import 'tailwindcss';\r\n\r\n:root {\r\n --md-sys-color-background: #18130b;\r\n --md-sys-color-on-background: #ede1d3;\r\n --md-sys-color-surface: #18130b;\r\n --md-sys-color-surface-dim: #18130b;\r\n --md-sys-color-surface-bright: #3f382f;\r\n --md-sys-color-surface-container-lowest: #120d06;\r\n --md-sys-color-surface-container-low: #201b12;\r\n --md-sys-color-surface-container: #251f16;\r\n --md-sys-color-surface-container-high: #2f2920;\r\n --md-sys-color-surface-container-highest: #3b342a;\r\n --md-sys-color-on-surface: #ede1d3;\r\n --md-sys-color-surface-variant: #504534;\r\n --md-sys-color-on-surface-variant: #d5c4ae;\r\n --md-sys-color-inverse-surface: #ede1d3;\r\n --md-sys-color-inverse-on-surface: #362f26;\r\n --md-sys-color-outline: #9d8f7b;\r\n --md-sys-color-outline-variant: #504534;\r\n --md-sys-color-shadow: #000000;\r\n --md-sys-color-scrim: #000000;\r\n --md-sys-color-surface-tint: #ffba3e;\r\n --md-sys-color-primary: #ffc971;\r\n --md-sys-color-on-primary: #432c00;\r\n --md-sys-color-primary-container: #ecaa2e;\r\n --md-sys-color-on-primary-container: #614100;\r\n --md-sys-color-inverse-primary: #7f5700;\r\n --md-sys-color-secondary: #e6c188;\r\n --md-sys-color-on-secondary: #432c02;\r\n --md-sys-color-secondary-container: #5e4518;\r\n --md-sys-color-on-secondary-container: #d7b37c;\r\n --md-sys-color-tertiary: #c7dc64;\r\n --md-sys-color-on-tertiary: #2c3400;\r\n --md-sys-color-tertiary-container: #acc04b;\r\n --md-sys-color-on-tertiary-container: #414d00;\r\n --md-sys-color-error: #ffb4ab;\r\n --md-sys-color-on-error: #690005;\r\n --md-sys-color-error-container: #93000a;\r\n --md-sys-color-on-error-container: #ffdad6;\r\n}\r\n\r\n@theme {\r\n --color-background: var(--md-sys-color-background);\r\n --color-on-background: var(--md-sys-color-on-background);\r\n --color-surface: var(--md-sys-color-surface);\r\n --color-surface-dim: var(--md-sys-color-surface-dim);\r\n --color-surface-bright: var(--md-sys-color-surface-bright);\r\n --color-surface-container-lowest: var(\r\n --md-sys-color-surface-container-lowest\r\n );\r\n --color-surface-container-low: var(--md-sys-color-surface-container-low);\r\n --color-surface-container: var(--md-sys-color-surface-container);\r\n --color-surface-container-high: var(--md-sys-color-surface-container-high);\r\n --color-surface-container-highest: var(\r\n --md-sys-color-surface-container-highest\r\n );\r\n --color-on-surface: var(--md-sys-color-on-surface);\r\n --color-surface-variant: var(--md-sys-color-surface-variant);\r\n --color-on-surface-variant: var(--md-sys-color-on-surface-variant);\r\n --color-inverse-surface: var(--md-sys-color-inverse-surface);\r\n --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);\r\n --color-outline: var(--md-sys-color-outline);\r\n --color-outline-variant: var(--md-sys-color-outline-variant);\r\n --color-shadow: var(--md-sys-color-shadow);\r\n --color-scrim: var(--md-sys-color-scrim);\r\n --color-surface-tint: var(--md-sys-color-surface-tint);\r\n --color-primary: var(--md-sys-color-primary);\r\n --color-on-primary: var(--md-sys-color-on-primary);\r\n --color-primary-container: var(--md-sys-color-primary-container);\r\n --color-on-primary-container: var(--md-sys-color-on-primary-container);\r\n --color-inverse-primary: var(--md-sys-color-inverse-primary);\r\n --color-secondary: var(--md-sys-color-secondary);\r\n --color-on-secondary: var(--md-sys-color-on-secondary);\r\n --color-secondary-container: var(--md-sys-color-secondary-container);\r\n --color-on-secondary-container: var(--md-sys-color-on-secondary-container);\r\n --color-tertiary: var(--md-sys-color-tertiary);\r\n --color-on-tertiary: var(--md-sys-color-on-tertiary);\r\n --color-tertiary-container: var(--md-sys-color-tertiary-container);\r\n --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);\r\n --color-error: var(--md-sys-color-error);\r\n --color-on-error: var(--md-sys-color-on-error);\r\n --color-error-container: var(--md-sys-color-error-container);\r\n --color-on-error-container: var(--md-sys-color-on-error-container);\r\n}\r\n```\r\n\r\n## Example\r\n\r\n```jsx\r\nimport { Button } from 'actify'\r\n\r\nexport default () => {\r\n return \r\n}\r\n```\r\n" }, { "path": "apps/docs/content/getting-started/theme.md", "content": "---\r\ntitle: Theme\r\n---\r\n\r\n\r\n" }, { "path": "apps/docs/content/getting-started/why-actify.md", "content": "---\r\ntitle: Why Actify\r\n---\r\n\r\n## What is Actify?\r\n\r\nActify is an open source react component library written in Vite + React + Tailwind CSS based on Google's [Material Design 3](https://m3.material.io/). Highly inspired by [Vuetify](https://www.vuetifyjs.com). You can use it for write react pages.\r\n\r\n## Getting started\r\n\r\nFor a complete list of installation options please navigate to the [Installation page](/getting-started/installation)\r\n\r\n## Why Actify?\r\n\r\nActify is a powerful React Component Library built from the ground up to be easy to learn and rewarding to master. Our collection of UI components maintain a consistent style throughout your application with enough customization options to meet any use-case.\r\n\r\n## It’s free\r\n\r\nActify is an Open Source project available for free under the [MIT licensed](http://opensource.org/licenses/MIT)\r\n. Additionally, Actify’s source code is available on GitHub, allowing developers to modify and contribute to its development if they choose to do so.\r\n" }, { "path": "apps/docs/next.config.mjs", "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n distDir: 'dist',\n output: 'export'\n}\n\nexport default nextConfig\n" }, { "path": "apps/docs/package.json", "content": "{\n \"name\": \"docs\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"@docsearch/react\": \"^3.9.0\",\n \"@material/material-color-utilities\": \"^0.3.0\",\n \"actify\": \"workspace:*\",\n \"codesandbox\": \"^2.2.3\",\n \"date-fns\": \"^3.6.0\",\n \"gray-matter\": \"^4.0.3\",\n \"next\": \"^15.1.0\",\n \"next-themes\": \"^0.4.3\",\n \"react\": \"catalog:\",\n \"react-dom\": \"catalog:\",\n \"react-markdown\": \"^9.0.1\",\n \"rehype-autolink-headings\": \"^7.1.0\",\n \"rehype-raw\": \"^7.0.0\",\n \"rehype-slug\": \"^6.0.0\",\n \"remark-gfm\": \"^4.0.0\",\n \"shiki\": \"^1.6.1\",\n \"sonner\": \"^1.7.0\"\n },\n \"devDependencies\": {\n \"@tailwindcss/postcss\": \"^4.1.4\",\n \"@tailwindcss/typography\": \"^0.5.16\",\n \"@types/node\": \"^20.12.12\",\n \"@types/react\": \"catalog:\",\n \"@types/react-dom\": \"catalog:\",\n \"clsx\": \"^2.1.1\",\n \"postcss\": \"^8.5.3\",\n \"react-live\": \"^4.1.6\",\n \"tailwind-merge\": \"^2.5.4\",\n \"tailwind-variants\": \"^0.2.1\",\n \"tailwindcss\": \"^4.1.4\",\n \"typescript\": \"^5.4.5\"\n }\n}\n" }, { "path": "apps/docs/postcss.config.mjs", "content": "const config = {\n plugins: {\n '@tailwindcss/postcss': {}\n }\n}\nexport default config\n" }, { "path": "apps/docs/src/app/(docs)/[...slug]/page.tsx", "content": "import { getAllDocSlugs, getDocData } from '@/lib/doc'\r\n\r\nimport Markdown from '@/components/Markdown'\r\nimport TableOfContents from '@/components/TableOfContents'\r\nimport { getFileRaw } from '@/lib/raw'\r\n\r\ntype PageProps = {\r\n params: Promise<{ slug: string[] }>\r\n}\r\n\r\nexport const generateMetadata = async (props: PageProps) => {\r\n const params = await props.params\r\n const { slug } = params\r\n const docs = getDocData(slug)\r\n\r\n return {\r\n title: docs?.title,\r\n description: docs?.description\r\n }\r\n}\r\n\r\nexport async function generateStaticParams() {\r\n const slugs = getAllDocSlugs()\r\n return slugs\r\n}\r\n\r\nexport default async function PageLayout(props: PageProps) {\r\n const params = await props.params\r\n const { slug } = params\r\n const docs = getDocData(slug)\r\n\r\n const filepath = slug.join('/').replace('components/', '')\r\n const content = await getFileRaw(`./src/usages/${filepath}.tsx`)\r\n\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n" }, { "path": "apps/docs/src/app/(docs)/layout.tsx", "content": "'use client'\r\n\r\nimport Aside from '@/components/Aside'\r\nimport EditOnGitHub from '@/components/EditOnGitHub'\r\nimport { tv } from 'tailwind-variants'\r\nimport { usePathname } from 'next/navigation'\r\n\r\nconst base = tv({\r\n base: [\r\n 'flex',\r\n 'flex-col',\r\n 'bg-surface',\r\n 'text-on-surface',\r\n 'pl-0',\r\n 'md:pl-60',\r\n 'col-end-3',\r\n 'col-start-1'\r\n ]\r\n})\r\n\r\nexport default function DocLayout({ children }: { children: React.ReactNode }) {\r\n const pathname = usePathname()\r\n\r\n return (\r\n <>\r\n