├── .editorconfig
├── .github
    └── dependabot.yml
├── .gitignore
├── .husky
    └── pre-commit
├── .npmrc
├── .prettierignore
├── .prettierrc
├── .vscode
    └── settings.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs
    ├── .env.example
    ├── .gitignore
    ├── LICENSE.md
    ├── README.md
    ├── app
    │   ├── app.vue
    │   ├── assets
    │   │   └── css
    │   │   │   └── tailwind.css
    │   ├── components
    │   │   ├── Docs
    │   │   │   ├── Footer.vue
    │   │   │   ├── Navlink.vue
    │   │   │   ├── PageHeader.vue
    │   │   │   ├── Search.vue
    │   │   │   └── Toc.vue
    │   │   ├── MainNav.vue
    │   │   ├── MobileNav.vue
    │   │   ├── OgImage
    │   │   │   └── Docs.vue
    │   │   ├── Ui
    │   │   │   ├── Accordion
    │   │   │   │   ├── Accordion.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Header.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Alert
    │   │   │   │   ├── Alert.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   └── Title.vue
    │   │   │   ├── AlertDialog
    │   │   │   │   ├── Action.vue
    │   │   │   │   ├── AlertDialog.vue
    │   │   │   │   ├── Cancel.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Footer.vue
    │   │   │   │   ├── Header.vue
    │   │   │   │   ├── Overlay.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Title.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── AspectRatio.vue
    │   │   │   ├── Autocomplete
    │   │   │   │   ├── Anchor.vue
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── Autocomplete.vue
    │   │   │   │   ├── Cancel.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Empty.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── Input.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemIndicator.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   ├── Trigger.vue
    │   │   │   │   └── Viewport.vue
    │   │   │   ├── Avatar
    │   │   │   │   ├── Avatar.vue
    │   │   │   │   ├── Fallback.vue
    │   │   │   │   └── Image.vue
    │   │   │   ├── Badge.vue
    │   │   │   ├── Breadcrumbs.vue
    │   │   │   ├── Button.vue
    │   │   │   ├── Calendar.vue
    │   │   │   ├── Card
    │   │   │   │   ├── Card.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Footer.vue
    │   │   │   │   ├── Header.vue
    │   │   │   │   └── Title.vue
    │   │   │   ├── Checkbox
    │   │   │   │   ├── Checkbox.vue
    │   │   │   │   └── Indicator.vue
    │   │   │   ├── Chip.vue
    │   │   │   ├── Collapsible
    │   │   │   │   ├── Collapsible.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Command
    │   │   │   │   ├── Cancel.vue
    │   │   │   │   ├── Command.vue
    │   │   │   │   ├── Dialog.vue
    │   │   │   │   ├── Empty.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── Input.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   ├── List.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   └── Shortcut.vue
    │   │   │   ├── Container.vue
    │   │   │   ├── ContextMenu
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── CheckboxItem.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── ContextMenu.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemIndicator.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── RadioGroup.vue
    │   │   │   │   ├── RadioItem.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   ├── Shortcut.vue
    │   │   │   │   ├── Sub.vue
    │   │   │   │   ├── SubContent.vue
    │   │   │   │   ├── SubTrigger.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── CurrencyInput.vue
    │   │   │   ├── Datatable.client.vue
    │   │   │   ├── DateField.vue
    │   │   │   ├── Datepicker.vue
    │   │   │   ├── Dialog
    │   │   │   │   ├── Close.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Dialog.vue
    │   │   │   │   ├── Footer.vue
    │   │   │   │   ├── Header.vue
    │   │   │   │   ├── Overlay.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Title.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Divider.vue
    │   │   │   ├── Drawer
    │   │   │   │   ├── Close.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Drawer.vue
    │   │   │   │   ├── Overlay.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Title.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── DropdownMenu
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── CheckboxItem.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── DropdownMenu.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemIndicator.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── RadioGroup.vue
    │   │   │   │   ├── RadioItem.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   ├── Shortcut.vue
    │   │   │   │   ├── Sub.vue
    │   │   │   │   ├── SubContent.vue
    │   │   │   │   ├── SubTrigger.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Dropfile.vue
    │   │   │   ├── Editable
    │   │   │   │   ├── Area.vue
    │   │   │   │   ├── Cancel.vue
    │   │   │   │   ├── Edit.vue
    │   │   │   │   ├── Editable.vue
    │   │   │   │   ├── Input.vue
    │   │   │   │   ├── Preview.vue
    │   │   │   │   └── Submit.vue
    │   │   │   ├── FancyIcon.vue
    │   │   │   ├── Form
    │   │   │   │   ├── Control.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   └── Message.vue
    │   │   │   ├── GradientDivider.vue
    │   │   │   ├── HoverCard
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── HoverCard.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Input.vue
    │   │   │   ├── Kbd.vue
    │   │   │   ├── Label.vue
    │   │   │   ├── List
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── List.vue
    │   │   │   │   ├── Subtitle.vue
    │   │   │   │   └── Title.vue
    │   │   │   ├── Listbox
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Filter.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── GroupLabel.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemIndicator.vue
    │   │   │   │   ├── Listbox.vue
    │   │   │   │   └── Virtualizer.vue
    │   │   │   ├── Menubar
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── CheckboxItem.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemIndicator.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   ├── Menu.vue
    │   │   │   │   ├── Menubar.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── RadioGroup.vue
    │   │   │   │   ├── RadioItem.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   ├── Shortcut.vue
    │   │   │   │   ├── Sub.vue
    │   │   │   │   ├── SubContent.vue
    │   │   │   │   ├── SubTrigger.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── NativeSelect.vue
    │   │   │   ├── Navbar.vue
    │   │   │   ├── NavigationMenu
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Indicator.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── Link.vue
    │   │   │   │   ├── List.vue
    │   │   │   │   ├── NavigationMenu.vue
    │   │   │   │   ├── Sub.vue
    │   │   │   │   ├── Trigger.vue
    │   │   │   │   └── Viewport.vue
    │   │   │   ├── NumberField
    │   │   │   │   ├── Decrement.vue
    │   │   │   │   ├── Increment.vue
    │   │   │   │   ├── Input.vue
    │   │   │   │   └── NumberField.vue
    │   │   │   ├── Pagination
    │   │   │   │   ├── Ellipsis.vue
    │   │   │   │   ├── First.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── Last.vue
    │   │   │   │   ├── List.vue
    │   │   │   │   ├── Next.vue
    │   │   │   │   ├── Pagination.vue
    │   │   │   │   └── Prev.vue
    │   │   │   ├── PinInput
    │   │   │   │   ├── PinInput.vue
    │   │   │   │   └── PinInputInput.vue
    │   │   │   ├── Popover
    │   │   │   │   ├── Anchor.vue
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── Close.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Popover.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Trigger.vue
    │   │   │   │   └── X.vue
    │   │   │   ├── Progress
    │   │   │   │   ├── Indicator.vue
    │   │   │   │   └── Progress.vue
    │   │   │   ├── RadioGroup
    │   │   │   │   ├── Indicator.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   └── RadioGroup.vue
    │   │   │   ├── RetroGrid.vue
    │   │   │   ├── ScrollArea
    │   │   │   │   ├── Corner.vue
    │   │   │   │   ├── ScrollArea.vue
    │   │   │   │   ├── Scrollbar.vue
    │   │   │   │   ├── Thumb.vue
    │   │   │   │   └── Viewport.vue
    │   │   │   ├── Select
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Group.vue
    │   │   │   │   ├── Icon.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemIndicator.vue
    │   │   │   │   ├── ItemText.vue
    │   │   │   │   ├── Label.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── ScrollDownButton.vue
    │   │   │   │   ├── ScrollUpButton.vue
    │   │   │   │   ├── Select.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   ├── Trigger.vue
    │   │   │   │   ├── Value.vue
    │   │   │   │   └── Viewport.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Sheet
    │   │   │   │   ├── Close.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Footer.vue
    │   │   │   │   ├── Header.vue
    │   │   │   │   ├── Overlay.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Sheet.vue
    │   │   │   │   ├── Title.vue
    │   │   │   │   ├── Trigger.vue
    │   │   │   │   └── X.vue
    │   │   │   ├── Skeleton.vue
    │   │   │   ├── Slider
    │   │   │   │   ├── Range.vue
    │   │   │   │   ├── Slider.vue
    │   │   │   │   ├── Thumb.vue
    │   │   │   │   └── Track.vue
    │   │   │   ├── Splitter
    │   │   │   │   ├── Handle.vue
    │   │   │   │   ├── Panel.vue
    │   │   │   │   └── Splitter.vue
    │   │   │   ├── Stepper
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Indicator.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── Separator.vue
    │   │   │   │   ├── Stepper.vue
    │   │   │   │   ├── Title.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Switch
    │   │   │   │   ├── Switch.vue
    │   │   │   │   └── Thumb.vue
    │   │   │   ├── Table
    │   │   │   │   ├── Body.vue
    │   │   │   │   ├── Caption.vue
    │   │   │   │   ├── Cell.vue
    │   │   │   │   ├── Empty.vue
    │   │   │   │   ├── Footer.vue
    │   │   │   │   ├── Head.vue
    │   │   │   │   ├── Header.vue
    │   │   │   │   ├── Row.vue
    │   │   │   │   └── Table.vue
    │   │   │   ├── Tabs
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Indicator.vue
    │   │   │   │   ├── List.vue
    │   │   │   │   ├── Tabs.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── TagsInput
    │   │   │   │   ├── Clear.vue
    │   │   │   │   ├── Field.vue
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── ItemDelete.vue
    │   │   │   │   ├── ItemText.vue
    │   │   │   │   └── TagsInput.vue
    │   │   │   ├── TanStackTable.vue
    │   │   │   ├── Textarea.vue
    │   │   │   ├── Toast
    │   │   │   │   ├── Action.vue
    │   │   │   │   ├── Close.vue
    │   │   │   │   ├── Description.vue
    │   │   │   │   ├── Provider.vue
    │   │   │   │   ├── Title.vue
    │   │   │   │   ├── Toast.vue
    │   │   │   │   ├── Toaster.vue
    │   │   │   │   └── Viewport.vue
    │   │   │   ├── Toggle.vue
    │   │   │   ├── ToggleGroup
    │   │   │   │   ├── ToggleGroup.vue
    │   │   │   │   └── ToggleGroupItem.vue
    │   │   │   ├── Tooltip
    │   │   │   │   ├── Arrow.vue
    │   │   │   │   ├── Content.vue
    │   │   │   │   ├── Portal.vue
    │   │   │   │   ├── Provider.vue
    │   │   │   │   ├── Tooltip.vue
    │   │   │   │   └── Trigger.vue
    │   │   │   ├── Tree
    │   │   │   │   ├── Item.vue
    │   │   │   │   ├── Tree.vue
    │   │   │   │   └── Virtualizer.vue
    │   │   │   ├── Vee
    │   │   │   │   ├── Checkbox.vue
    │   │   │   │   ├── CurrencyInput.vue
    │   │   │   │   ├── DateField.vue
    │   │   │   │   ├── Datepicker.vue
    │   │   │   │   ├── FileInput.vue
    │   │   │   │   ├── Input.vue
    │   │   │   │   ├── MultiSelect.vue
    │   │   │   │   ├── NumberField.vue
    │   │   │   │   ├── PinInput.vue
    │   │   │   │   ├── RadioGroup.vue
    │   │   │   │   ├── Select.vue
    │   │   │   │   ├── TagsInput.vue
    │   │   │   │   └── Textarea.vue
    │   │   │   └── VueSonner.client.vue
    │   │   └── content
    │   │   │   ├── Examples
    │   │   │       ├── BasicExample.vue
    │   │   │       ├── ColumnsExample.vue
    │   │   │       ├── ComposableExample.vue
    │   │   │       ├── ImageExample.vue
    │   │   │       ├── ListExample.vue
    │   │   │       ├── RentExample.vue
    │   │   │       ├── StyleOneExample.vue
    │   │   │       └── TableExample.vue
    │   │   │   ├── Home
    │   │   │       ├── HomeFeatureCards.vue
    │   │   │       └── HomeHero.vue
    │   │   │   └── prose
    │   │   │       ├── ProseAlert.vue
    │   │   │       ├── ProsePre.vue
    │   │   │       └── ProseTable.vue
    │   ├── composables
    │   │   ├── defineShortcuts.ts
    │   │   ├── useFormField.ts
    │   │   ├── useShortcuts.ts
    │   │   └── useToast.ts
    │   ├── layouts
    │   │   ├── blank.vue
    │   │   └── default.vue
    │   ├── pages
    │   │   └── index.vue
    │   ├── plugins
    │   │   └── datatables.client.ts
    │   └── utils
    │   │   └── shared.styles.ts
    ├── content
    │   ├── 1.introduction
    │   │   ├── 1.setup.md
    │   │   ├── 2.devtools.md
    │   │   ├── 3.options.md
    │   │   └── _dir.yml
    │   ├── 2.examples
    │   │   ├── 1.basic.md
    │   │   ├── 2.style-one.md
    │   │   ├── 3.columns.md
    │   │   ├── 4.table.md
    │   │   ├── 5.list.md
    │   │   ├── 6.images.md
    │   │   ├── 7.rent-receipt.md
    │   │   ├── 8.composable.md
    │   │   └── _dir.yml
    │   └── index.md
    ├── eslint.config.mjs
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── icon.png
    │   └── icons
    │   │   ├── apple-touch-icon.png
    │   │   ├── favicon-16x16.png
    │   │   ├── favicon-32x32.png
    │   │   ├── favicon.ico
    │   │   ├── pwa-192x192.png
    │   │   ├── pwa-512x512.png
    │   │   ├── pwa-maskable-192x192.png
    │   │   └── pwa-maskable-512x512.png
    ├── tailwind.config.js
    ├── tsconfig.json
    └── ui-thing.config.ts
├── eslint.config.mjs
├── package-lock.json
├── package.json
├── playground
    ├── .prettierrc
    ├── app.vue
    ├── assets
    │   └── css
    │   │   └── tailwind.css
    ├── components
    │   └── Ui
    │   │   ├── Avatar
    │   │       ├── Avatar.vue
    │   │       ├── Fallback.vue
    │   │       └── Image.vue
    │   │   ├── Button.vue
    │   │   ├── Container.vue
    │   │   ├── Divider.vue
    │   │   └── Navbar.vue
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    ├── server
    │   └── tsconfig.json
    ├── tailwind.config.js
    ├── tsconfig.json
    ├── ui-thing.config.ts
    └── utils
    │   └── shared.styles.ts
├── src
    ├── module.ts
    └── runtime
    │   ├── composables
    │       ├── fontPresets.ts
    │       └── usePDFMake.ts
    │   └── pdfmake.client.ts
├── test
    ├── basic.test.ts
    └── fixtures
    │   └── basic
    │       ├── app.vue
    │       ├── nuxt.config.ts
    │       └── package.json
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_size = 2
 5 | indent_style = space
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # Please see the documentation for all configuration options:
 2 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 3 | 
 4 | version: 2
 5 | updates:
 6 |   - package-ecosystem: "npm"
 7 |     directories:
 8 |       - "/"
 9 |       - "/playground"
10 |       - "/docs"
11 |     schedule:
12 |       interval: "weekly"
13 |       day: "sunday"
14 |       time: "06:00"
15 |       timezone: "America/Jamaica"
16 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npm run lint && npm run format
2 | # For testing purposes, you can add the following line to the end of the file:
3 | # exit 1
4 | 
5 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "always",
 3 |   "endOfLine": "lf",
 4 |   "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
 5 |   "printWidth": 100,
 6 |   "semi": true,
 7 |   "singleQuote": false,
 8 |   "tabWidth": 2,
 9 |   "trailingComma": "es5",
10 |   "useTabs": false,
11 |   "vueIndentScriptAndStyle": true,
12 |   "tailwindFunctions": ["tv"],
13 |   "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
14 | }
15 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "eslint.useFlatConfig": true
3 | }
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Behon Baker.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/.env.example:
--------------------------------------------------------------------------------
1 | SITE_URL=http://localhost:3000


--------------------------------------------------------------------------------
/docs/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Behon Baker
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <NuxtRouteAnnouncer />
 4 |     <NuxtLoadingIndicator />
 5 |     <NuxtPwaManifest />
 6 |     <ConfigProvider :use-id="useIdFunction">
 7 |       <NuxtPage />
 8 |     </ConfigProvider>
 9 |     <UiVueSonner />
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts" setup>
14 |   import { ConfigProvider } from "radix-vue";
15 | 
16 |   const useIdFunction = () => useId();
17 | </script>
18 | 


--------------------------------------------------------------------------------
/docs/app/components/Docs/PageHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="not-prose">
 3 |     <p v-if="dir" class="text-primary mb-2 font-medium capitalize md:mb-4">{{ dir }}</p>
 4 |     <h1 class="mb-3 text-3xl font-bold md:mb-4 md:text-4xl">
 5 |       {{ page?.title }}
 6 |     </h1>
 7 |     <p class="text-muted-foreground md:text-lg">
 8 |       {{ page?.description }}
 9 |     </p>
10 |     <UiDivider class="my-8" />
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts" setup>
15 |   const { page } = useContent();
16 |   const dir = computed(() => page.value?._dir?.replace(/-/g, " "));
17 | </script>
18 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Accordion/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AccordionContent v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <div class="pb-4 pt-0">
 4 |       <slot>{{ content }}</slot>
 5 |     </div>
 6 |   </AccordionContent>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { AccordionContent } from "radix-vue";
11 |   import type { AccordionContentProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     AccordionContentProps & {
15 |       /** Custom class(es) to add to the parent */
16 |       class?: any;
17 |       /** The content of the accordion */
18 |       content?: any;
19 |     }
20 |   >();
21 | 
22 |   const forwarded = reactiveOmit(props, "class", "content");
23 | 
24 |   const styles = tv({
25 |     base: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Accordion/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AccordionHeader v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </AccordionHeader>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AccordionHeader } from "radix-vue";
 9 |   import type { AccordionHeaderProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     AccordionHeaderProps & {
13 |       class?: any;
14 |     }
15 |   >();
16 | 
17 |   const forwarded = reactiveOmit(props, "class");
18 | 
19 |   const styles = tv({
20 |     base: "flex",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Accordion/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AccordionItem v-slot="slotProps" v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot v-bind="slotProps" />
 4 |   </AccordionItem>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 |   import { AccordionItem } from "radix-vue";
 9 |   import type { AccordionItemProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     AccordionItemProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 | 
18 |   const forwarded = reactiveOmit(props, "class");
19 | 
20 |   const styles = tv({
21 |     base: "border-b",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Alert/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>{{ description }}</slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class to add to the parent */
15 |         class?: any;
16 |         /** The description text that should be displayed */
17 |         description?: string;
18 |       }
19 |     >(),
20 |     { as: "div", class: undefined, description: undefined }
21 |   );
22 | 
23 |   const forwarded = reactiveOmit(props, "class", "description");
24 | 
25 |   const styles = tv({
26 |     base: "text-sm [&_p]:leading-relaxed",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Alert/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>{{ title }}</slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class to add to the parent */
15 |         class?: any;
16 |         /** The title text that should be displayed */
17 |         title?: string;
18 |       }
19 |     >(),
20 |     { as: "h5", class: undefined, title: undefined }
21 |   );
22 | 
23 |   const forwarded = reactiveOmit(props, "class", "title");
24 | 
25 |   const styles = tv({
26 |     base: "mb-1 font-medium leading-none tracking-tight",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogDescription v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>{{ description }}</slot>
 4 |   </AlertDialogDescription>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogDescription } from "radix-vue";
 9 |   import type { AlertDialogDescriptionProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     AlertDialogDescriptionProps & {
13 |       /** Text to display in the description */
14 |       description?: string;
15 |       /** Custom class(es) to add to the description */
16 |       class?: any;
17 |     }
18 |   >();
19 | 
20 |   const forwarded = reactiveOmit(props, "class", "description");
21 | 
22 |   const styles = tv({
23 |     base: "text-muted-foreground text-sm",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |       class: undefined,
21 |     }
22 |   );
23 | 
24 |   const forwarded = reactiveOmit(props, "class");
25 |   const styles = tv({
26 |     base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |       class: undefined,
21 |     }
22 |   );
23 |   const forwarded = reactiveOmit(props, "class");
24 |   const styles = tv({
25 |     base: "flex flex-col gap-2 text-center sm:text-left",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogOverlay v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { AlertDialogOverlay } from "radix-vue";
 7 |   import type { AlertDialogOverlayProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     AlertDialogOverlayProps & {
11 |       /** Custom class(es) to add to the overlay */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-background/80 data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn fixed inset-0 z-50 backdrop-blur-sm",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogPortal v-bind="props">
 3 |     <slot />
 4 |   </AlertDialogPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogPortal } from "radix-vue";
 9 |   import type { AlertDialogPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<AlertDialogPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogTitle v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>{{ title }}</slot>
 4 |   </AlertDialogTitle>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogTitle } from "radix-vue";
 9 |   import type { AlertDialogTitleProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     AlertDialogTitleProps & {
13 |       /** Text to display in the title */
14 |       title?: string;
15 |       /** Custom class(es) to add to the title */
16 |       class?: any;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "title");
20 |   const styles = tv({
21 |     base: "text-lg font-semibold",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AlertDialog/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogTrigger v-bind="props">
 3 |     <slot />
 4 |   </AlertDialogTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogTrigger } from "radix-vue";
 9 |   import type { AlertDialogTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<AlertDialogTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/AspectRatio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AspectRatio v-bind="props">
 3 |     <slot />
 4 |   </AspectRatio>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AspectRatio } from "radix-vue";
 9 |   import type { AspectRatioProps } from "radix-vue";
10 | 
11 |   const props = defineProps<AspectRatioProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Anchor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxAnchor v-bind="props" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ComboboxAnchor>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxAnchor } from "radix-vue";
 9 |   import type { ComboboxAnchorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxAnchorProps & {
13 |       class?: any;
14 |     }
15 |   >();
16 | 
17 |   const styles = tv({
18 |     base: "border-input bg-background ring-offset-background focus-within:ring-ring flex h-10 w-full items-center rounded-md border px-3 py-2 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxArrow v-bind="props" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { ComboboxArrow } from "radix-vue";
 7 |   import type { ComboboxArrowProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     ComboboxArrowProps & {
11 |       class?: any;
12 |     }
13 |   >();
14 | 
15 |   const styles = tv({
16 |     base: "bg-muted rotate-45 border",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Autocomplete.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ComboboxRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxRootProps & {
13 |       class?: any;
14 |     }
15 |   >();
16 | 
17 |   const emits = defineEmits<ComboboxRootEmits>();
18 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
19 |   const styles = tv({
20 |     base: "relative",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Cancel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxCancel v-bind="props">
 3 |     <slot />
 4 |   </ComboboxCancel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxCancel } from "radix-vue";
 9 |   import type { ComboboxCancelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxCancelProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxEmpty v-bind="props">
 3 |     <slot />
 4 |   </ComboboxEmpty>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxEmpty } from "radix-vue";
 9 |   import type { ComboboxEmptyProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxEmptyProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxGroup v-bind="props">
 3 |     <slot />
 4 |   </ComboboxGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxGroup } from "radix-vue";
 9 |   import type { ComboboxGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxGroupProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxInput v-bind="props" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { ComboboxInput } from "radix-vue";
 7 |   import type { ComboboxInputProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     ComboboxInputProps & {
11 |       placeholder?: string;
12 |       class?: any;
13 |     }
14 |   >();
15 | 
16 |   const styles = tv({
17 |     base: "bg-background placeholder:text-muted-foreground size-full grow rounded-md focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot name="icon">
 4 |       <span class="absolute inset-y-0 left-2 flex items-center justify-center">
 5 |         <UiAutocompleteItemIndicator class="animate-in fade-in-0 zoom-in-0" :icon="icon" />
 6 |       </span>
 7 |     </slot>
 8 |     <slot />
 9 |   </ComboboxItem>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { ComboboxItem, useForwardPropsEmits } from "radix-vue";
14 |   import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";
15 | 
16 |   const props = defineProps<
17 |     ComboboxItemProps & {
18 |       class?: any;
19 |       icon?: string;
20 |     }
21 |   >();
22 | 
23 |   const emits = defineEmits<{
24 |     select: ComboboxItemEmits["select"];
25 |   }>();
26 |   const forwarded = useForwardPropsEmits(props, emits);
27 | 
28 |   const styles = tv({
29 |     base: "aria-selected:bg-accent aria-selected:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 pl-9 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxItemIndicator v-bind="props">
 3 |     <slot><Icon :name="icon || 'ph:check'" class="h-4 w-4" /></slot>
 4 |   </ComboboxItemIndicator>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxItemIndicator } from "radix-vue";
 9 |   import type { ComboboxItemIndicatorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxItemIndicatorProps & {
13 |       icon?: string;
14 |     }
15 |   >();
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxLabel :class="styles({ class: props.class })" v-bind="props">
 3 |     <slot />
 4 |   </ComboboxLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxLabel } from "radix-vue";
 9 |   import type { ComboboxLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxLabelProps & {
13 |       class?: any;
14 |     }
15 |   >();
16 | 
17 |   const styles = tv({
18 |     base: "text-muted-foreground px-2 py-1.5 pl-9 text-sm font-medium",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxPortal position="popper" v-bind="props">
 3 |     <slot />
 4 |   </ComboboxPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxPortal } from "radix-vue";
 9 |   import type { ComboboxPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxSeparator v-bind="props">
 3 |     <slot />
 4 |   </ComboboxSeparator>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxSeparator } from "radix-vue";
 9 |   import type { ComboboxSeparatorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxSeparatorProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxTrigger v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ComboboxTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxTrigger } from "radix-vue";
 9 |   import type { ComboboxTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxTriggerProps & {
13 |       class?: any;
14 |     }
15 |   >();
16 |   const forwarded = reactiveOmit(props, "class");
17 |   const styles = tv({
18 |     base: "inline-flex shrink-0 cursor-pointer items-center justify-center",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Autocomplete/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxViewport v-bind="props">
 3 |     <slot />
 4 |   </ComboboxViewport>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxViewport } from "radix-vue";
 9 |   import type { ComboboxViewportProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxViewportProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Avatar/Fallback.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarFallback :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>
 4 |       {{ fallback }}
 5 |     </slot>
 6 |   </AvatarFallback>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { AvatarFallback } from "radix-vue";
11 |   import type { AvatarFallbackProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     AvatarFallbackProps & {
15 |       /** The text to display inside th eavatar */
16 |       fallback?: string;
17 |       /** Custom class(es) to add to the element */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "fallback");
22 |   const styles = tv({
23 |     base: "bg-muted flex h-full w-full items-center justify-center rounded-full font-medium",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Avatar/Image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarImage v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { AvatarImage, useForwardPropsEmits } from "radix-vue";
 7 |   import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     AvatarImageProps & {
11 |       /** The alt text for the image */
12 |       alt?: string;
13 |       /** Custom class(es) to add to the element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const emits = defineEmits<AvatarImageEmits>();
18 | 
19 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
20 | 
21 |   const styles = tv({
22 |     base: "aspect-square h-full w-full object-cover",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Card/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       {{ content }}
 5 |     </slot>
 6 |   </Primitive>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { Primitive } from "radix-vue";
11 |   import type { PrimitiveProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       PrimitiveProps & {
16 |         /** Content to display in the card */
17 |         content?: string;
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     { as: "div" }
23 |   );
24 |   const styles = tv({
25 |     base: "p-6 [&+*]:pt-0",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Card/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot>
 4 |       {{ description }}
 5 |     </slot>
 6 |   </Primitive>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { Primitive } from "radix-vue";
11 |   import type { PrimitiveProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       PrimitiveProps & {
16 |         /** Description to display in the card */
17 |         description?: string;
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     {
23 |       as: "div",
24 |     }
25 |   );
26 |   const styles = tv({
27 |     base: "text-muted-foreground text-sm",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Card/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     { as: "div" }
19 |   );
20 | 
21 |   const styles = tv({
22 |     base: "flex items-center p-6",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Card/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     { as: "div" }
19 |   );
20 | 
21 |   const styles = tv({
22 |     base: "flex flex-col space-y-1.5 p-6 [&+*]:pt-0",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Card/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot>
 4 |       {{ title }}
 5 |     </slot>
 6 |   </Primitive>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { Primitive } from "radix-vue";
11 |   import type { PrimitiveProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       PrimitiveProps & {
16 |         /** Title to display in the card */
17 |         title?: string;
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     {
23 |       as: "h3",
24 |     }
25 |   );
26 | 
27 |   const styles = tv({
28 |     base: "text-xl font-semibold leading-none tracking-tight",
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Checkbox/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CheckboxIndicator :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>
 4 |       <Icon :name="checked == 'indeterminate' ? 'lucide:minus' : icon" class="h-4 w-4" />
 5 |     </slot>
 6 |   </CheckboxIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { CheckboxIndicator } from "radix-vue";
11 |   import type { CheckboxIndicatorProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       CheckboxIndicatorProps & {
16 |         /** The state of the checkbox */
17 |         checked?: boolean | "indeterminate";
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |         /**
21 |          * Icon to display when the checkbox is checked
22 |          * @default lucide:check
23 |          */
24 |         icon?: string;
25 |       }
26 |     >(),
27 |     {
28 |       icon: "lucide:check",
29 |     }
30 |   );
31 |   const forwarded = reactiveOmit(props, "class", "icon");
32 |   const styles = tv({
33 |     base: "flex items-center justify-center text-current",
34 |   });
35 | </script>
36 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Collapsible/Collapsible.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CollapsibleRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </CollapsibleRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<CollapsibleRootProps>();
12 | 
13 |   const emit = defineEmits<CollapsibleRootEmits>();
14 | 
15 |   const forwarded = useForwardPropsEmits(props, emit);
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Collapsible/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CollapsibleContent :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </CollapsibleContent>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { CollapsibleContent } from "radix-vue";
 9 |   import type { CollapsibleContentProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     CollapsibleContentProps & {
13 |       /** Customer class(es) to add to the element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down overflow-hidden transition will-change-auto",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Collapsible/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CollapsibleTrigger v-bind="forwarded">
 3 |     <slot />
 4 |   </CollapsibleTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { CollapsibleTrigger, useForwardProps } from "radix-vue";
 9 |   import type { CollapsibleTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<CollapsibleTriggerProps>();
12 |   const forwarded = useForwardProps(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Cancel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxCancel v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon name="lucide:x" class="text-muted-foreground/70 h-4 w-4" />
 5 |     </slot>
 6 |   </ComboboxCancel>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { ComboboxCancel } from "radix-vue";
11 |   import type { ComboboxCancelProps } from "radix-vue";
12 | 
13 |   const props = defineProps<ComboboxCancelProps & { class?: any }>();
14 |   const forwarded = reactiveOmit(props, "class");
15 |   const styles = tv({
16 |     base: "flex items-center justify-center",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Command.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxRoot v-bind="forwarded" :open="true" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ComboboxRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ComboboxRootProps & { class?: any }>();
12 |   const emits = defineEmits<ComboboxRootEmits>();
13 | 
14 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
15 | 
16 |   const styles = tv({
17 |     base: "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiDialog v-bind="forwarded">
 3 |     <UiDialogContent class="overflow-hidden p-0 shadow-lg">
 4 |       <UiCommand>
 5 |         <slot />
 6 |       </UiCommand>
 7 |     </UiDialogContent>
 8 |   </UiDialog>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { useForwardPropsEmits } from "radix-vue";
13 |   import type { DialogRootEmits, DialogRootProps } from "radix-vue";
14 | 
15 |   const props = defineProps<DialogRootProps>();
16 |   const emits = defineEmits<DialogRootEmits>();
17 | 
18 |   const forwarded = useForwardPropsEmits(props, emits);
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxEmpty :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </ComboboxEmpty>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxEmpty } from "radix-vue";
 9 |   import type { ComboboxEmptyProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxEmptyProps & {
13 |       /**Custom class(es) to add to the element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "py-6 text-center text-sm",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxGroup :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot name="heading">
 4 |       <UiCommandLabel v-if="heading" :label="heading" />
 5 |     </slot>
 6 |     <slot />
 7 |   </ComboboxGroup>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { ComboboxGroup } from "radix-vue";
12 |   import type { ComboboxGroupProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     ComboboxGroupProps & {
16 |       /**The heading for the group */
17 |       heading?: any;
18 |       /**Custom class(es) to add to the element */
19 |       class?: any;
20 |     }
21 |   >();
22 |   const forwarded = reactiveOmit(props, "class", "heading");
23 |   const styles = tv({
24 |     base: "text-foreground overflow-hidden p-1",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex items-center border-b px-3">
 3 |     <Icon :name="icon || 'lucide:search'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />
 4 |     <ComboboxInput
 5 |       v-bind="$attrs"
 6 |       :type="type ?? 'text'"
 7 |       :disabled="disabled"
 8 |       auto-focus
 9 |       :class="styles({ class: props.class })"
10 |     />
11 |     <UiCommandCancel v-if="showCancel" />
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts" setup>
16 |   import { ComboboxInput } from "radix-vue";
17 | 
18 |   defineOptions({ inheritAttrs: false });
19 | 
20 |   const props = defineProps<{
21 |     /**Custom class(es) to add to the input element*/
22 |     class?: any;
23 |     /**The icon to render*/
24 |     icon?: string;
25 |     /**The input type*/
26 |     type?: string;
27 |     /**Whether the input is disabled*/
28 |     disabled?: boolean;
29 |     /**Whether to show the cancel button*/
30 |     showCancel?: boolean;
31 |   }>();
32 | 
33 |   const styles = tv({
34 |     base: "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
35 |   });
36 | </script>
37 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxLabel :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ label }}</slot>
 4 |   </ComboboxLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxLabel } from "radix-vue";
 9 |   import type { ComboboxLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxLabelProps & {
13 |       /**
14 |        * Class(es) to pass to the ComboboxLabel component.
15 |        */
16 |       class?: any;
17 |       /**
18 |        * The label to display.
19 |        */
20 |       label?: any;
21 |     }
22 |   >();
23 |   const forwarded = reactiveOmit(props, "class", "label");
24 |   const styles = tv({
25 |     base: "text-muted-foreground px-2 py-1.5 text-xs font-medium",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ComboboxContent>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";
10 | 
11 |   defineOptions({ inheritAttrs: false });
12 | 
13 |   const props = defineProps<
14 |     ComboboxContentProps & {
15 |       /**Custom class(es) to add to the element */
16 |       class?: any;
17 |     }
18 |   >();
19 | 
20 |   const emits = defineEmits<ComboboxContentEmits>();
21 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
22 | 
23 |   const styles = tv({
24 |     base: "max-h-[300px] overflow-y-auto overflow-x-hidden",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComboboxSeparator :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ComboboxSeparator>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ComboboxSeparator } from "radix-vue";
 9 |   import type { ComboboxSeparatorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ComboboxSeparatorProps & {
13 |       /**Custom class(es) to add to the element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const styles = tv({
18 |     base: "bg-border -mx-1 h-px",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Command/Shortcut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :as="as || 'span'" :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot>{{ shortcut }}</slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     PrimitiveProps & {
13 |       /**Custom class(es) to add to the element */
14 |       class?: any;
15 |       /** The shortcut text to render */
16 |       shortcut?: any;
17 |     }
18 |   >();
19 |   const styles = tv({
20 |     base: "text-muted-foreground ml-auto text-xs tracking-widest",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Container.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         class?: any;
15 |       }
16 |     >(),
17 |     {
18 |       as: "div",
19 |     }
20 |   );
21 | 
22 |   const forwarded = reactiveOmit(props, "class");
23 | 
24 |   const styles = tv({
25 |     base: "container mx-auto",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { ContextMenuArrow } from "radix-vue";
 7 |   import type { ContextMenuArrowProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     ContextMenuArrowProps & {
11 |       /** Custom class(es) to add to teh arrow */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-muted border",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/ContextMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </ContextMenuRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ContextMenuRootEmits, ContextMenuRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ContextMenuRootProps>();
12 |   const emit = defineEmits<ContextMenuRootEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emit);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuGroup v-bind="props">
 3 |     <slot />
 4 |   </ContextMenuGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuGroup } from "radix-vue";
 9 |   import type { ContextMenuGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ContextMenuGroupProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 5 |     </slot>
 6 |   </ContextMenuItemIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { ContextMenuItemIndicator } from "radix-vue";
11 |   import type { ContextMenuItemIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     ContextMenuItemIndicatorProps & {
15 |       /** The icon to display */
16 |       icon?: string;
17 |       class?: any;
18 |     }
19 |   >();
20 |   const forwarded = reactiveOmit(props, "icon");
21 | 
22 |   const styles = tv({
23 |     base: "flex items-center justify-center",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ label }}</slot>
 4 |   </ContextMenuLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuLabel } from "radix-vue";
 9 |   import type { ContextMenuLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ContextMenuLabelProps & {
13 |       /**Custom class(es) to add to the element */
14 |       class?: any;
15 |       /** Wether an indentation should be added to the item or not */
16 |       inset?: boolean;
17 |       /** The label for the item */
18 |       label?: string;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "inset", "label");
22 |   const styles = tv({
23 |     base: "text-foreground inline-block w-full px-2 py-1.5 text-sm font-semibold",
24 |     variants: {
25 |       inset: { true: "pl-8" },
26 |     },
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuPortal v-bind="props">
 3 |     <slot />
 4 |   </ContextMenuPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuPortal } from "radix-vue";
 9 |   import type { ContextMenuPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ContextMenuPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuRadioGroup v-bind="forwarded">
 3 |     <slot />
 4 |   </ContextMenuRadioGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ContextMenuRadioGroupProps>();
12 | 
13 |   const emits = defineEmits<ContextMenuRadioGroupEmits>();
14 | 
15 |   const forwarded = useForwardPropsEmits(props, emits);
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuSeparator :class="styles({ class: props.class })" v-bind="props" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { ContextMenuSeparator } from "radix-vue";
 7 |   import type { ContextMenuSeparatorProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     ContextMenuSeparatorProps & {
11 |       /**Custom class(es) to add to the element */
12 |       class?: any;
13 |     }
14 |   >();
15 | 
16 |   const styles = tv({
17 |     base: "bg-border -mx-1 my-1 h-px",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Shortcut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :as="as || 'span'" :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     PrimitiveProps & {
13 |       class?: any;
14 |     }
15 |   >();
16 | 
17 |   const styles = tv({
18 |     base: "text-muted-foreground ml-auto text-xs tracking-widest",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Sub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuSub v-bind="forwarded">
 3 |     <slot />
 4 |   </ContextMenuSub>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ContextMenuSubEmits, ContextMenuSubProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ContextMenuSubProps>();
12 |   const emits = defineEmits<ContextMenuSubEmits>();
13 | 
14 |   const forwarded = useForwardPropsEmits(props, emits);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ContextMenu/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ContextMenuTrigger v-bind="props">
 3 |     <slot />
 4 |   </ContextMenuTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ContextMenuTrigger } from "radix-vue";
 9 |   import type { ContextMenuTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ContextMenuTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogClose v-bind="props">
 3 |     <slot />
 4 |   </DialogClose>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogClose } from "radix-vue";
 9 |   import type { DialogCloseProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogCloseProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ description }}</slot>
 4 |   </DialogDescription>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogDescription } from "radix-vue";
 9 |   import type { DialogDescriptionProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     DialogDescriptionProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |       /** The description text */
16 |       description?: string;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "description");
20 |   const styles = tv({
21 |     base: "text-muted-foreground text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </DialogRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DialogRootEmits, DialogRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogRootProps>();
12 |   const emit = defineEmits<DialogRootEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emit);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "flex flex-col space-y-1.5 text-center sm:text-left",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { DialogOverlay } from "radix-vue";
 7 |   import type { DialogOverlayProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     DialogOverlayProps & {
11 |       /** Custom class(es) to add to the parent */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-background/80 data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn fixed inset-0 z-50 backdrop-blur-sm",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogPortal v-bind="props">
 3 |     <slot />
 4 |   </DialogPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogPortal } from "radix-vue";
 9 |   import type { DialogPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ title }}</slot>
 4 |   </DialogTitle>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogTitle } from "radix-vue";
 9 |   import type { DialogTitleProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     DialogTitleProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |       /** The title text */
16 |       title?: string;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "title");
20 |   const styles = tv({
21 |     base: "text-lg font-semibold leading-none tracking-tight",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Dialog/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogTrigger v-bind="props">
 3 |     <slot />
 4 |   </DialogTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogTrigger } from "radix-vue";
 9 |   import type { DialogTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerClose v-bind="props">
 3 |     <slot />
 4 |   </DrawerClose>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DrawerClose } from "vaul-vue";
 9 | 
10 |   interface Props
11 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}
12 |   const props = defineProps<Props>();
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiDrawerPortal>
 3 |     <slot name="overlay">
 4 |       <UiDrawerOverlay />
 5 |     </slot>
 6 |     <slot name="content">
 7 |       <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">
 8 |         <slot name="knob">
 9 |           <div
10 |             className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"
11 |           />
12 |         </slot>
13 |         <slot />
14 |       </DrawerContent>
15 |     </slot>
16 |   </UiDrawerPortal>
17 | </template>
18 | 
19 | <script lang="ts" setup>
20 |   import { DrawerContent } from "vaul-vue";
21 | 
22 |   defineOptions({ inheritAttrs: false });
23 | 
24 |   interface Props
25 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}
26 | 
27 |   const props = defineProps<Props & { class?: any }>();
28 |   const styles = tv({
29 |     base: "bg-background focus-visible:ring-primary/40 fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerDescription v-bind="props" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       {{ props.text }}
 5 |     </slot>
 6 |   </DrawerDescription>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { DrawerDescription } from "vaul-vue";
11 | 
12 |   interface Props
13 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {
14 |     class?: any;
15 |     text?: string;
16 |   }
17 | 
18 |   const props = defineProps<Props>();
19 | 
20 |   const styles = tv({
21 |     base: "text-muted-foreground text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </DrawerRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { useForwardPropsEmits } from "radix-vue";
 9 |   import { DrawerRoot } from "vaul-vue";
10 |   import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
11 | 
12 |   const props = defineProps<DrawerRootProps>();
13 |   const emits = defineEmits<DrawerRootEmits>();
14 |   const forwarded = useForwardPropsEmits(props, emits);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { DrawerOverlay } from "vaul-vue";
 7 | 
 8 |   interface Props
 9 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}
10 | 
11 |   const props = defineProps<Props & { class?: any }>();
12 | 
13 |   const styles = tv({
14 |     base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",
15 |   });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerPortal v-bind="props">
 3 |     <slot />
 4 |   </DrawerPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DrawerPortal } from "vaul-vue";
 9 | 
10 |   interface Props
11 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}
12 | 
13 |   const props = defineProps<Props>();
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerTitle v-bind="props" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       {{ props.text }}
 5 |     </slot>
 6 |   </DrawerTitle>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { DrawerTitle } from "vaul-vue";
11 | 
12 |   interface Props
13 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {
14 |     class?: any;
15 |     text?: string;
16 |   }
17 | 
18 |   const props = defineProps<Props>();
19 | 
20 |   const styles = tv({
21 |     base: "text-lg font-semibold leading-none tracking-tight",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Drawer/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DrawerTrigger v-bind="props">
 3 |     <slot />
 4 |   </DrawerTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DrawerTrigger } from "vaul-vue";
 9 | 
10 |   interface Props
11 |     extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}
12 | 
13 |   const props = defineProps<Props>();
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { DropdownMenuArrow } from "radix-vue";
 7 |   import type { DropdownMenuArrowProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(
10 |     defineProps<
11 |       DropdownMenuArrowProps & {
12 |         /** Custom class(es) to add to the parent */
13 |         class?: any;
14 |       }
15 |     >(),
16 |     {
17 |       asChild: false,
18 |       width: 10,
19 |       height: 5,
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "bg-muted rotate-45 border",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/DropdownMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </DropdownMenuRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuRootProps>();
12 | 
13 |   const emit = defineEmits<DropdownMenuRootEmits>();
14 |   const forwarded = useForwardPropsEmits(props, emit);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuGroup v-bind="props">
 3 |     <slot />
 4 |   </DropdownMenuGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuGroup } from "radix-vue";
 9 |   import type { DropdownMenuGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuGroupProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 5 |     </slot>
 6 |   </DropdownMenuItemIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { DropdownMenuItemIndicator } from "radix-vue";
11 |   import type { DropdownMenuItemIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     DropdownMenuItemIndicatorProps & {
15 |       /** The icon to display */
16 |       icon?: string;
17 |       /** Custom class(es) to add to the parent */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "icon");
22 | 
23 |   const styles = tv({
24 |     base: "flex items-center justify-center",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ label }}</slot>
 4 |   </DropdownMenuLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuLabel } from "radix-vue";
 9 |   import type { DropdownMenuLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     DropdownMenuLabelProps & {
13 |       class?: any;
14 |       inset?: boolean;
15 |       label?: string;
16 |     }
17 |   >();
18 |   const forwarded = reactiveOmit(props, "class", "inset", "label");
19 |   const styles = tv({
20 |     base: "text-foreground inline-block w-full px-2 py-1.5 text-sm font-semibold",
21 |     variants: {
22 |       inset: { true: "pl-8" },
23 |     },
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuPortal v-bind="props">
 3 |     <slot />
 4 |   </DropdownMenuPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuPortal } from "radix-vue";
 9 |   import type { DropdownMenuPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuRadioGroup v-bind="forwarded">
 3 |     <slot />
 4 |   </DropdownMenuRadioGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuRadioGroupProps>();
12 | 
13 |   const emits = defineEmits<DropdownMenuRadioGroupEmits>();
14 | 
15 |   const forwarded = useForwardPropsEmits(props, emits);
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { DropdownMenuSeparator } from "radix-vue";
 7 |   import type { DropdownMenuSeparatorProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     DropdownMenuSeparatorProps & {
11 |       /** Custom class(es) to add to the parent */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-border -mx-1 my-1 h-px",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Shortcut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "span",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "ml-auto text-xs tracking-widest opacity-60",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Sub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuSub v-bind="forwarded">
 3 |     <slot />
 4 |   </DropdownMenuSub>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuSubProps>();
12 |   const emits = defineEmits<DropdownMenuSubEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emits);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/DropdownMenu/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuTrigger v-bind="props">
 3 |     <slot />
 4 |   </DropdownMenuTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuTrigger } from "radix-vue";
 9 |   import type { DropdownMenuTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Area.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditableArea v-bind="props">
 3 |     <slot />
 4 |   </EditableArea>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditableArea } from "radix-vue";
 9 |   import type { EditableAreaProps } from "radix-vue";
10 | 
11 |   const props = defineProps<EditableAreaProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Cancel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditableCancelTrigger v-bind="props">
 3 |     <slot />
 4 |   </EditableCancelTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditableCancelTrigger } from "radix-vue";
 9 |   import type { EditableCancelTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<EditableCancelTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditableEditTrigger v-bind="props">
 3 |     <slot />
 4 |   </EditableEditTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditableEditTrigger } from "radix-vue";
 9 |   import type { EditableEditTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<EditableEditTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Editable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditableRoot :ref="forwardRef" v-slot="slotProps" v-bind="forwarded">
 3 |     <slot v-bind="slotProps" />
 4 |   </EditableRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditableRoot, useForwardExpose, useForwardPropsEmits } from "radix-vue";
 9 |   import type { EditableRootEmits, EditableRootProps } from "radix-vue";
10 | 
11 |   const { currentRef, forwardRef } = useForwardExpose();
12 |   const props = defineProps<EditableRootProps>();
13 |   const emit = defineEmits<EditableRootEmits & { ready: [v?: any] }>();
14 |   const forwarded = useForwardPropsEmits(props, emit);
15 | 
16 |   onMounted(() => {
17 |     // Emit the ready event with the current ref value
18 |     emit("ready", currentRef);
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditableInput v-bind="props">
 3 |     <slot />
 4 |   </EditableInput>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditableInput } from "radix-vue";
 9 |   import type { EditableInputProps } from "radix-vue";
10 | 
11 |   const props = defineProps<EditableInputProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Preview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditablePreview v-bind="props">
 3 |     <slot />
 4 |   </EditablePreview>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditablePreview } from "radix-vue";
 9 |   import type { EditablePreviewProps } from "radix-vue";
10 | 
11 |   const props = defineProps<EditablePreviewProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Editable/Submit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <EditableSubmitTrigger v-bind="props">
 3 |     <slot />
 4 |   </EditableSubmitTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { EditableSubmitTrigger } from "radix-vue";
 9 |   import type { EditableSubmitTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<EditableSubmitTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Form/Control.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Slot
 3 |     :id="formItemId"
 4 |     :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
 5 |     :aria-invalid="!!error"
 6 |   >
 7 |     <slot />
 8 |   </Slot>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { Slot } from "radix-vue";
13 | 
14 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Form/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p :id="formDescriptionId" :class="styles({ class: props.class })" v-bind="$attrs">
 3 |     <slot>
 4 |       <ClientOnly>
 5 |         <p v-html="description" />
 6 |       </ClientOnly>
 7 |     </slot>
 8 |   </p>
 9 | </template>
10 | <script lang="ts" setup>
11 |   defineOptions({ inheritAttrs: false });
12 | 
13 |   const { formDescriptionId } = useFormField();
14 |   const props = defineProps<{ class?: any; description?: string }>();
15 |   const styles = tv({ base: "text-muted-foreground text-sm" });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Form/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="styles({ class: props.class })" v-bind="$attrs">
 3 |     <slot name="label">
 4 |       <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />
 5 |     </slot>
 6 |     <UiFormControl>
 7 |       <slot />
 8 |     </UiFormControl>
 9 |     <slot name="description">
10 |       <UiFormDescription v-if="description" :description="description" />
11 |     </slot>
12 |     <slot name="errorMessage">
13 |       <TransitionSlide tag="p">
14 |         <UiFormMessage v-if="!hideMessage" />
15 |       </TransitionSlide>
16 |     </slot>
17 |   </div>
18 | </template>
19 | 
20 | <script lang="ts">
21 |   import type { InjectionKey } from "vue";
22 | 
23 |   export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;
24 | </script>
25 | 
26 | <script lang="ts" setup>
27 |   defineOptions({ inheritAttrs: false });
28 | 
29 |   const id = useId();
30 |   provide(FORM_ITEM_INJECTION_KEY, id);
31 | 
32 |   const props = defineProps<{
33 |     class?: any;
34 |     label?: string;
35 |     description?: string;
36 |     hint?: string;
37 |     hideMessage?: boolean;
38 |   }>();
39 | 
40 |   const styles = tv({ base: "space-y-1.5" });
41 | </script>
42 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Form/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Label
 3 |     :class="styles({ error: Boolean(error), class: props.class })"
 4 |     :for="formItemId"
 5 |     v-bind="$attrs"
 6 |   >
 7 |     <slot
 8 |       >{{ label }}
 9 |       <span class="text-muted-foreground/80 ml-auto font-normal">{{ hint }}</span></slot
10 |     >
11 |   </Label>
12 | </template>
13 | 
14 | <script lang="ts" setup>
15 |   import { Label } from "radix-vue";
16 |   import type { LabelProps } from "radix-vue";
17 | 
18 |   defineOptions({ inheritAttrs: false });
19 |   const props = defineProps<LabelProps & { class?: any; label?: string; hint?: string }>();
20 | 
21 |   const { error, formItemId } = useFormField();
22 | 
23 |   const styles = tv({
24 |     base: "text-foreground flex w-full items-center justify-between text-left text-sm font-medium tracking-tight hover:cursor-pointer",
25 |     variants: {
26 |       error: {
27 |         true: "text-destructive",
28 |       },
29 |     },
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Form/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ErrorMessage
 3 |     :id="formMessageId"
 4 |     as="p"
 5 |     :name="toValue(name)"
 6 |     class="text-destructive text-sm font-medium"
 7 |   />
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   const { name, formMessageId } = useFormField();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/GradientDivider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Separator v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { Separator } from "radix-vue";
 7 |   import type { SeparatorProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(
10 |     defineProps<
11 |       SeparatorProps & {
12 |         /** Custom class(es) to add to parent element */
13 |         class?: any;
14 |       }
15 |     >(),
16 |     {
17 |       as: "hr",
18 |     }
19 |   );
20 | 
21 |   const forwarded = reactiveOmit(props, "class");
22 | 
23 |   const styles = tv({
24 |     base: 'h-px w-full border-t-0 bg-[linear-gradient(90deg,theme("colors.input/10%"),_theme("colors.input"),_theme("colors.input/10%"))]',
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/HoverCard/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <HoverCardArrow :class="styles({ class: props.class })" v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { HoverCardArrow } from "radix-vue";
 7 |   import type { HoverCardArrowProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(
10 |     defineProps<
11 |       HoverCardArrowProps & {
12 |         /** Custom class(es) to add to the parent */
13 |         class?: any;
14 |       }
15 |     >(),
16 |     {
17 |       height: 5,
18 |       width: 10,
19 |     }
20 |   );
21 |   const forwarded = reactiveOmit(props, "class");
22 |   const styles = tv({
23 |     base: "fill-popover",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/HoverCard/HoverCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <HoverCardRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </HoverCardRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { HoverCardRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { HoverCardRootEmits, HoverCardRootProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(defineProps<HoverCardRootProps>(), {
12 |     openDelay: 200,
13 |     closeDelay: 200,
14 |   });
15 | 
16 |   const emits = defineEmits<HoverCardRootEmits>();
17 |   const forwarded = useForwardPropsEmits(props, emits);
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/HoverCard/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <HoverCardPortal v-bind="props">
 3 |     <slot />
 4 |   </HoverCardPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { HoverCardPortal } from "radix-vue";
 9 |   import type { HoverCardPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<HoverCardPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/HoverCard/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <HoverCardTrigger v-bind="props">
 3 |     <slot />
 4 |   </HoverCardTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { HoverCardTrigger } from "radix-vue";
 9 |   import type { HoverCardTriggerProps } from "radix-vue";
10 | 
11 |   defineOptions({ inheritAttrs: false });
12 |   const props = defineProps<HoverCardTriggerProps>();
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- eslint-disable-next-line vue/html-self-closing -->
 3 |   <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />
 4 | </template>
 5 | 
 6 | <script lang="ts" setup>
 7 |   const props = withDefaults(
 8 |     defineProps<{
 9 |       class?: any;
10 |       id?: string;
11 |       name?: string;
12 |       placeholder?: string;
13 |       disabled?: boolean;
14 |       required?: boolean;
15 |       type?: string;
16 |       modelValue?: any;
17 |     }>(),
18 |     { type: "text" }
19 |   );
20 |   const emits = defineEmits<{
21 |     "update:modelValue": [value: any];
22 |   }>();
23 |   const localModel = useVModel(props, "modelValue", emits);
24 | 
25 |   const styles = tv({
26 |     base: "form-input border-input bg-background ring-offset-background file:text-foreground placeholder:text-muted-foreground focus:border-input focus:ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Kbd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ size, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | <script setup lang="ts">
 7 |   import { Primitive } from "radix-vue";
 8 |   import type { PrimitiveProps } from "radix-vue";
 9 | 
10 |   const props = withDefaults(
11 |     defineProps<
12 |       PrimitiveProps & {
13 |         /** The size of the component */
14 |         size?: VariantProps<typeof styles>["size"];
15 |         /** Custom class(es) to add to the parent */
16 |         class?: any;
17 |       }
18 |     >(),
19 |     {
20 |       as: "kbd",
21 |       size: "sm",
22 |     }
23 |   );
24 | 
25 |   const forwarded = reactiveOmit(props, "class", "size");
26 | 
27 |   const styles = tv({
28 |     base: "border-border bg-muted pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md border font-sans font-medium",
29 |     variants: {
30 |       size: {
31 |         xs: "h-5 min-h-[16px] px-1 text-[10px]",
32 |         sm: "h-6 min-h-[20px] px-1.5 text-[11px]",
33 |         md: "h-7 min-h-[24px] px-2 text-[12px]",
34 |       },
35 |     },
36 |     defaultVariants: {
37 |       size: "sm",
38 |     },
39 |   });
40 | </script>
41 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Label :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |     <slot name="hint">
 5 |       <span v-if="hint">
 6 |         {{ hint }}
 7 |       </span>
 8 |     </slot>
 9 |   </Label>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { Label } from "radix-vue";
14 |   import type { LabelProps } from "radix-vue";
15 | 
16 |   const props = defineProps<
17 |     LabelProps & {
18 |       /** Custom class(es) to add to the label */
19 |       class?: any;
20 |       hint?: string;
21 |     }
22 |   >();
23 | 
24 |   const forwarded = reactiveOmit(props, "class", "hint");
25 | 
26 |   const styles = tv({
27 |     base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/List/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "flex flex-col gap-1 leading-none",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/List/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component
 3 |     :is="eltype"
 4 |     :href="href"
 5 |     :to="to"
 6 |     :class="
 7 |       styles({
 8 |         hover: Boolean(onClick) || Boolean(to) || Boolean(href),
 9 |         class: props.class,
10 |       })
11 |     "
12 |     @click="onClick"
13 |   >
14 |     <slot />
15 |   </component>
16 | </template>
17 | 
18 | <script lang="ts" setup>
19 |   const props = defineProps<{
20 |     /**Custom class(es) to add to the element */
21 |     class?: any;
22 |     /** Function called when the item is clicked */
23 |     onClick?: () => void;
24 |     /** The location that the item should navigate to when clicked */
25 |     to?: string;
26 |     /** The href for the `a` tag */
27 |     href?: string;
28 |   }>();
29 | 
30 |   const styles = tv({
31 |     base: "flex w-full items-center gap-5 px-4 py-2",
32 |     variants: {
33 |       hover: {
34 |         true: "hover:bg-muted focus-visible:ring-primary/10 cursor-pointer outline-none focus-visible:ring-4",
35 |       },
36 |     },
37 |   });
38 | 
39 |   const eltype = computed(() => {
40 |     if (props.to || props.href) return resolveComponent("NuxtLink");
41 |     if (props.onClick) return "button";
42 |     return "li";
43 |   });
44 | </script>
45 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/List/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "ul",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "w-full py-2",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/List/Subtitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ subtitle }}</slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |         /** The subtitle of the component */
17 |         subtitle?: string;
18 |       }
19 |     >(),
20 |     {
21 |       as: "p",
22 |     }
23 |   );
24 |   const forwarded = reactiveOmit(props, "class", "subtitle");
25 |   const styles = tv({
26 |     base: "text-muted-foreground text-sm",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/List/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ title }}</slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |         /** The title of the component */
17 |         title?: string;
18 |       }
19 |     >(),
20 |     {
21 |       as: "p",
22 |     }
23 |   );
24 |   const forwarded = reactiveOmit(props, "class", "title");
25 |   const styles = tv({
26 |     base: "font-semibold",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxContent v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ListboxContent>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ListboxContent, useForwardProps } from "radix-vue";
 9 |   import type { ListboxContentProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ListboxContentProps & { class?: any }>();
12 |   const forwarded = useForwardProps(reactiveOmit(props));
13 | 
14 |   const styles = tv({
15 |     base: "bg-popover max-h-[300px] w-full overflow-y-auto rounded-md border px-4 py-2",
16 |   });
17 | </script>
18 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/Filter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxFilter v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { ListboxFilter, useForwardPropsEmits } from "radix-vue";
 7 |   import type { ListboxFilterEmits, ListboxFilterProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<ListboxFilterProps & { class?: any; placeholder?: string }>();
10 |   const emits = defineEmits<ListboxFilterEmits>();
11 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
12 | 
13 |   const styles = tv({
14 |     base: "border-input bg-background ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-10 w-full rounded-md border px-3 py-2 text-[16px] file:border-0 file:bg-transparent file:text-sm file:font-medium file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
15 |   });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxGroup v-bind="forwarded">
 3 |     <slot />
 4 |   </ListboxGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ListboxGroup, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ListboxGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ListboxGroupProps>();
12 |   const forwarded = useForwardPropsEmits(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/GroupLabel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxGroupLabel v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ListboxGroupLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ListboxGroupLabel, useForwardProps } from "radix-vue";
 9 |   import type { ListboxGroupLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ListboxGroupLabelProps & { class?: any }>();
12 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
13 | 
14 |   const styles = tv({
15 |     base: "py-1.5 pl-1 pr-8 text-sm font-semibold",
16 |   });
17 | </script>
18 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |     <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
 5 |       <UiListboxItemIndicator :icon="icon" />
 6 |     </span>
 7 |   </ListboxItem>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { ListboxItem, useForwardPropsEmits } from "radix-vue";
12 |   import type { ListboxItemEmits, ListboxItemProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     ListboxItemProps & {
16 |       class?: any;
17 |       icon?: string;
18 |     }
19 |   >();
20 |   const emits = defineEmits<ListboxItemEmits>();
21 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon"), emits);
22 | 
23 |   const styles = tv({
24 |     base: "focus:bg-accent focus:text-accent-foreground data-[highlighted]:ring-border relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-3 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:ring-1",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxItemIndicator v-bind="forwarded">
 3 |     <slot>
 4 |       <Icon :class="styles({ class: props.class })" :name="icon || 'lucide:circle-check'" />
 5 |     </slot>
 6 |   </ListboxItemIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { ListboxItemIndicator, useForwardPropsEmits } from "radix-vue";
11 |   import type { ListboxItemIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<ListboxItemIndicatorProps & { class?: any; icon?: string }>();
14 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"));
15 | 
16 |   const styles = tv({
17 |     base: "size-5 shrink-0",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/Listbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxRoot v-slot="{ modelValue }" v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot :model-value="modelValue" />
 4 |   </ListboxRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ListboxRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { ListboxRootEmits, ListboxRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ListboxRootProps & { class?: any }>();
12 |   const emits = defineEmits<ListboxRootEmits>();
13 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
14 | 
15 |   const styles = tv({
16 |     base: "relative flex flex-col gap-4",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Listbox/Virtualizer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ListboxVirtualizer
 3 |     v-slot="{ option }"
 4 |     v-bind="forwarded"
 5 |     :class="styles({ class: props.class })"
 6 |   >
 7 |     <slot :option="option" />
 8 |   </ListboxVirtualizer>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { ListboxVirtualizer, useForwardProps } from "radix-vue";
13 |   import type { ListboxVirtualizerProps } from "radix-vue";
14 | 
15 |   const props = defineProps<ListboxVirtualizerProps & { class?: any }>();
16 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
17 | 
18 |   const styles = tv({
19 |     base: "",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarArrow v-bind="props" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { MenubarArrow } from "radix-vue";
 7 |   import type { MenubarArrowProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(defineProps<MenubarArrowProps>(), {
10 |     width: 10,
11 |     height: 5,
12 |   });
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarGroup v-bind="props">
 3 |     <slot />
 4 |   </MenubarGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarGroup } from "radix-vue";
 9 |   import type { MenubarGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<MenubarGroupProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 5 |     </slot>
 6 |   </MenubarItemIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { MenubarItemIndicator } from "radix-vue";
11 |   import type { MenubarItemIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     MenubarItemIndicatorProps & {
15 |       /** The icon to display */
16 |       icon?: string;
17 |       /** The class(es) to apply to the parent */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "icon");
22 |   const styles = tv({
23 |     base: "flex shrink-0 items-center justify-center",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </MenubarLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarLabel } from "radix-vue";
 9 |   import type { MenubarLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     MenubarLabelProps & {
13 |       class?: any;
14 |       inset?: boolean;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class", "inset");
18 |   const styles = tv({
19 |     base: "px-2 py-1.5 text-sm font-semibold",
20 |     variants: {
21 |       inset: {
22 |         true: "pl-8",
23 |       },
24 |     },
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarMenu v-bind="props">
 3 |     <slot />
 4 |   </MenubarMenu>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarMenu } from "radix-vue";
 9 |   import type { MenubarMenuProps } from "radix-vue";
10 | 
11 |   const props = defineProps<MenubarMenuProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Menubar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </MenubarRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { MenubarRootEmits, MenubarRootProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       MenubarRootProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       loop: true,
20 |     }
21 |   );
22 | 
23 |   const emits = defineEmits<MenubarRootEmits>();
24 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
25 | 
26 |   const styles = tv({
27 |     base: "bg-background inline-flex h-10 items-center space-x-1 rounded-md border p-1",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarPortal v-bind="props">
 3 |     <slot />
 4 |   </MenubarPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import type { MenubarPortalProps } from "radix-vue";
 9 | 
10 |   const props = defineProps<MenubarPortalProps>();
11 | </script>
12 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarRadioGroup v-bind="forwarded">
 3 |     <slot />
 4 |   </MenubarRadioGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarRadioGroup, useForwardPropsEmits } from "radix-vue";
 9 |   import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<MenubarRadioGroupProps>();
12 |   const emits = defineEmits<MenubarRadioGroupEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emits);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { MenubarSeparator } from "radix-vue";
 7 |   import type { MenubarSeparatorProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     MenubarSeparatorProps & {
11 |       /** Custom class(es) to add to the parent */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-border -mx-1 my-1 h-px",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Shortcut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     { as: "span" }
19 |   );
20 |   const forwarded = reactiveOmit(props, "class");
21 |   const styles = tv({
22 |     base: "ml-auto text-xs tracking-widest opacity-60",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Sub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarSub v-bind="forwarded">
 3 |     <slot />
 4 |   </MenubarSub>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarSub, useForwardPropsEmits } from "radix-vue";
 9 |   import type { MenubarSubEmits, MenubarSubProps } from "radix-vue";
10 | 
11 |   const props = defineProps<MenubarSubProps>();
12 |   const emits = defineEmits<MenubarSubEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emits);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Menubar/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MenubarTrigger :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </MenubarTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { MenubarTrigger } from "radix-vue";
 9 |   import type { MenubarTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     MenubarTriggerProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |         /** Whether the navbar should be sticky */
17 |         sticky?: boolean;
18 |       }
19 |     >(),
20 |     {
21 |       as: "header",
22 |     }
23 |   );
24 | 
25 |   const forwarded = reactiveOmit(props, "class", "sticky");
26 | 
27 |   const styles = tv({
28 |     base: "bg-background/90 z-20 border-b backdrop-blur",
29 |     variants: {
30 |       sticky: {
31 |         true: "sticky top-0",
32 |       },
33 |     },
34 |   });
35 | </script>
36 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuContent v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </NavigationMenuContent>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { NavigationMenuContent, useForwardPropsEmits } from "radix-vue";
 9 |   import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     NavigationMenuContentProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 | 
18 |   const emits = defineEmits<NavigationMenuContentEmits>();
19 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
20 | 
21 |   const styles = tv({
22 |     base: "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |     <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
 5 |   </NavigationMenuIndicator>
 6 | </template>
 7 | 
 8 | <script lang="ts" setup>
 9 |   import { NavigationMenuIndicator } from "radix-vue";
10 |   import type { NavigationMenuIndicatorProps } from "radix-vue";
11 | 
12 |   const props = defineProps<
13 |     NavigationMenuIndicatorProps & {
14 |       /** Custom class(es) to add to the parent */
15 |       class?: any;
16 |     }
17 |   >();
18 |   const forwarded = reactiveOmit(props, "class");
19 |   const styles = tv({
20 |     base: "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuItem v-bind="props">
 3 |     <slot />
 4 |   </NavigationMenuItem>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { NavigationMenuItem } from "radix-vue";
 9 |   import type { NavigationMenuItemProps } from "radix-vue";
10 | 
11 |   const props = defineProps<NavigationMenuItemProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/Link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuLink v-bind="forwarded">
 3 |     <slot />
 4 |   </NavigationMenuLink>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { NavigationMenuLink, useForwardPropsEmits } from "radix-vue";
 9 |   import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "radix-vue";
10 | 
11 |   const props = defineProps<NavigationMenuLinkProps>();
12 |   const emits = defineEmits<NavigationMenuLinkEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emits);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuList v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </NavigationMenuList>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { NavigationMenuList } from "radix-vue";
 9 |   import type { NavigationMenuListProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     NavigationMenuListProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "group flex flex-1 list-none items-center justify-center space-x-1",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/NavigationMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |     <slot name="viewport">
 5 |       <UiNavigationMenuViewport />
 6 |     </slot>
 7 |   </NavigationMenuRoot>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";
12 |   import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     NavigationMenuRootProps & {
16 |       /** Custom class(es) to add to the parent */
17 |       class?: any;
18 |     }
19 |   >();
20 |   const emits = defineEmits<NavigationMenuRootEmits>();
21 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
22 | 
23 |   const styles = tv({
24 |     base: "relative flex max-w-max flex-1 items-center justify-center",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/Sub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuSub v-bind="forwarded">
 3 |     <slot />
 4 |   </NavigationMenuSub>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { NavigationMenuSub, useForwardPropsEmits } from "radix-vue";
 9 |   import type { NavigationMenuSubEmits, NavigationMenuSubProps } from "radix-vue";
10 | 
11 |   const props = defineProps<NavigationMenuSubProps>();
12 |   const emits = defineEmits<NavigationMenuSubEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emits);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NavigationMenu/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="absolute left-0 top-full flex justify-center">
 3 |     <NavigationMenuViewport
 4 |       v-bind="{ ...forwarded, ...$attrs }"
 5 |       :class="styles({ class: props.class })"
 6 |     />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { NavigationMenuViewport } from "radix-vue";
12 |   import type { NavigationMenuViewportProps } from "radix-vue";
13 | 
14 |   defineOptions({ inheritAttrs: false });
15 |   const props = defineProps<
16 |     NavigationMenuViewportProps & {
17 |       /** Custom class(es) to add to the parent */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class");
22 |   const styles = tv({
23 |     base: "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NumberField/Decrement.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NumberFieldDecrement v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon :name="props.icon" />
 5 |     </slot>
 6 |   </NumberFieldDecrement>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { NumberFieldDecrement, useForwardProps } from "radix-vue";
11 |   import type { NumberFieldDecrementProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       NumberFieldDecrementProps & {
16 |         class?: any;
17 |         icon?: string;
18 |       }
19 |     >(),
20 |     { icon: "lucide:minus" }
21 |   );
22 | 
23 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
24 | 
25 |   const styles = tv({
26 |     base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NumberField/Increment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NumberFieldIncrement v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon :name="props.icon" />
 5 |     </slot>
 6 |   </NumberFieldIncrement>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { NumberFieldIncrement, useForwardProps } from "radix-vue";
11 |   import type { NumberFieldIncrementProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       NumberFieldIncrementProps & {
16 |         class?: any;
17 |         icon?: string;
18 |       }
19 |     >(),
20 |     { icon: "lucide:plus" }
21 |   );
22 | 
23 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
24 | 
25 |   const styles = tv({
26 |     base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/NumberField/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NumberFieldInput v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { NumberFieldInput, useForwardProps } from "radix-vue";
 7 |   import type { NumberFieldInputProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(
10 |     defineProps<
11 |       NumberFieldInputProps & {
12 |         class?: any;
13 |       }
14 |     >(),
15 |     {}
16 |   );
17 | 
18 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
19 | 
20 |   const styles = tv({
21 |     base: "placeholder:text-muted-foreground/80 h-full w-full grow bg-transparent text-center text-base focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/Ellipsis.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationEllipsis v-bind="forwarded">
 3 |     <slot>
 4 |       <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">
 5 |         <Icon :name="icon" />
 6 |       </div>
 7 |     </slot>
 8 |   </PaginationEllipsis>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { PaginationEllipsis } from "radix-vue";
13 |   import type { PaginationEllipsisProps } from "radix-vue";
14 | 
15 |   const props = defineProps<
16 |     PaginationEllipsisProps & {
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "icon");
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/First.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationFirst v-bind="forwarded">
 3 |     <slot>
 4 |       <UiButton v-if="icon" variant="ghost" size="icon-sm">
 5 |         <Icon :name="icon" />
 6 |       </UiButton>
 7 |     </slot>
 8 |   </PaginationFirst>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { PaginationFirst } from "radix-vue";
13 |   import type { PaginationFirstProps } from "radix-vue";
14 | 
15 |   const props = defineProps<
16 |     PaginationFirstProps & {
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "icon");
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationListItem v-bind="props">
 3 |     <slot>
 4 |       <UiButton
 5 |         variant="outline"
 6 |         size="icon-sm"
 7 |         class="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:border-transparent"
 8 |       >
 9 |         {{ value }}
10 |       </UiButton>
11 |     </slot>
12 |   </PaginationListItem>
13 | </template>
14 | 
15 | <script lang="ts" setup>
16 |   import { PaginationListItem } from "radix-vue";
17 |   import type { PaginationListItemProps } from "radix-vue";
18 | 
19 |   const props = defineProps<PaginationListItemProps>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/Last.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationLast v-bind="forwarded">
 3 |     <slot>
 4 |       <UiButton v-if="icon" variant="ghost" size="icon-sm">
 5 |         <Icon :name="icon" />
 6 |       </UiButton>
 7 |     </slot>
 8 |   </PaginationLast>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { PaginationLast } from "radix-vue";
13 |   import type { PaginationLastProps } from "radix-vue";
14 | 
15 |   const props = defineProps<
16 |     PaginationLastProps & {
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "icon");
22 | </script>
23 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot :items="items" />
 4 |   </PaginationList>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { PaginationList } from "radix-vue";
 9 |   import type { PaginationListProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     PaginationListProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "flex items-center gap-1",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/Next.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationNext v-bind="props">
 3 |     <slot>
 4 |       <UiButton v-if="icon" variant="ghost" size="icon-sm">
 5 |         <Icon :name="icon" />
 6 |       </UiButton>
 7 |     </slot>
 8 |   </PaginationNext>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { PaginationNext } from "radix-vue";
13 |   import type { PaginationNextProps } from "radix-vue";
14 | 
15 |   const props = defineProps<
16 |     PaginationNextProps & {
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Pagination/Prev.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PaginationPrev v-bind="forwarded">
 3 |     <slot>
 4 |       <UiButton v-if="icon" variant="ghost" size="icon-sm">
 5 |         <Icon :name="icon" />
 6 |       </UiButton>
 7 |     </slot>
 8 |   </PaginationPrev>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { PaginationPrev } from "radix-vue";
13 |   import type { PaginationPrevProps } from "radix-vue";
14 | 
15 |   const props = defineProps<
16 |     PaginationPrevProps & {
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 | 
22 |   const forwarded = reactiveOmit(props, "icon");
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/PinInput/PinInputInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PinInputInput v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { PinInputInput } from "radix-vue";
 7 |   import type { PinInputInputProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     PinInputInputProps & {
11 |       class?: any;
12 |     }
13 |   >();
14 |   const forwarded = reactiveOmit(props, "class");
15 |   const styles = tv({
16 |     base: "border-input bg-background focus-visible:ring-ring focus-visible:ring-offset-background h-10 w-10 rounded-md border p-1 text-center text-base font-medium placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/Anchor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverAnchor v-bind="forwarded">
 3 |     <slot />
 4 |   </PopoverAnchor>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { PopoverAnchor, useForwardProps } from "radix-vue";
 9 |   import type { PopoverAnchorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<PopoverAnchorProps>();
12 |   const forwarded = useForwardProps(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverArrow v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { PopoverArrow, useForwardProps } from "radix-vue";
 7 |   import type { PopoverArrowProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(defineProps<PopoverArrowProps>(), {
10 |     width: 10,
11 |     height: 5,
12 |   });
13 | 
14 |   const forwarded = useForwardProps(props);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverClose v-bind="forwarded">
 3 |     <slot />
 4 |   </PopoverClose>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { PopoverClose, useForwardProps } from "radix-vue";
 9 |   import type { PopoverCloseProps } from "radix-vue";
10 | 
11 |   const props = defineProps<PopoverCloseProps>();
12 |   const forwarded = useForwardProps(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/Popover.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </PopoverRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { PopoverRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<PopoverRootProps>();
12 |   const emits = defineEmits<PopoverRootEmits>();
13 | 
14 |   const forwarded = useForwardPropsEmits(props, emits);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverPortal v-bind="forwarded">
 3 |     <slot />
 4 |   </PopoverPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { PopoverPortal, useForwardProps } from "radix-vue";
 9 |   import type { PopoverPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<PopoverPortalProps>();
12 |   const forwarded = useForwardProps(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverTrigger v-bind="props">
 3 |     <slot />
 4 |   </PopoverTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { PopoverTrigger } from "radix-vue";
 9 |   import type { PopoverTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<PopoverTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Popover/X.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PopoverClose v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon :name="icon" class="h-4 w-4" />
 5 |       <span class="sr-only">{{ srText }}</span>
 6 |     </slot>
 7 |   </PopoverClose>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { PopoverClose, useForwardProps } from "radix-vue";
12 |   import type { PopoverCloseProps } from "radix-vue";
13 | 
14 |   const props = withDefaults(
15 |     defineProps<
16 |       PopoverCloseProps & {
17 |         class?: any;
18 |         icon?: string;
19 |         srText?: string;
20 |       }
21 |     >(),
22 |     {
23 |       icon: "heroicons:x-mark",
24 |       srText: "Close",
25 |     }
26 |   );
27 |   const forwarded = useForwardProps(reactiveOmit(props, "icon", "srText", "class"));
28 | 
29 |   const styles = tv({
30 |     base: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
31 |   });
32 | </script>
33 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Progress/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ProgressIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ProgressIndicator>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ProgressIndicator } from "radix-vue";
 9 |   import type { ProgressIndicatorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ProgressIndicatorProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "bg-primary h-full w-full flex-1 rounded-full transition-all",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Progress/Progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ProgressRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <UiProgressIndicator :style="{ transform: `translateX(-${100 - (modelValue || 0)}%)` }" />
 5 |     </slot>
 6 |   </ProgressRoot>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { ProgressRoot, useForwardPropsEmits } from "radix-vue";
11 |   import type { ProgressRootEmits, ProgressRootProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     ProgressRootProps & {
15 |       /** Custom class(es) to add to the parent */
16 |       class?: any;
17 |     }
18 |   >();
19 | 
20 |   const emits = defineEmits<ProgressRootEmits>();
21 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
22 | 
23 |   const styles = tv({
24 |     base: "bg-secondary relative h-3 w-full overflow-hidden rounded-full",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/RadioGroup/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RadioGroupIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon :name="icon || 'ph:circle-fill'" class="h-2.5 w-2.5 fill-current text-current" />
 5 |     </slot>
 6 |   </RadioGroupIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { RadioGroupIndicator } from "radix-vue";
11 |   import type { RadioGroupIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     RadioGroupIndicatorProps & {
15 |       /** Custom class(es) to add to the parent */
16 |       class?: any;
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "icon");
22 |   const styles = tv({
23 |     base: "flex items-center justify-center",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/RadioGroup/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RadioGroupItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <UiRadioGroupIndicator :icon="props.icon" />
 5 |     </slot>
 6 |   </RadioGroupItem>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { RadioGroupItem } from "radix-vue";
11 |   import type { RadioGroupItemProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     RadioGroupItemProps & {
15 |       /** Class to apply to the item */
16 |       class?: any;
17 |       /** Icon to show */
18 |       icon?: string;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "icon");
22 |   const styles = tv({
23 |     base: "border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/RadioGroup/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RadioGroupRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </RadioGroupRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { RadioGroupRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { RadioGroupRootEmits, RadioGroupRootProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       RadioGroupRootProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       orientation: "vertical",
20 |       loop: true,
21 |     }
22 |   );
23 | 
24 |   const emits = defineEmits<RadioGroupRootEmits>();
25 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
26 | 
27 |   const styles = tv({ base: "grid gap-3" });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/RetroGrid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="pointer-events-none absolute h-full w-full overflow-hidden [perspective:500px] dark:opacity-70"
 4 |   >
 5 |     <div class="absolute inset-0 [transform:rotateX(20deg)]">
 6 |       <div
 7 |         class="animate-grid inset-0 -ml-[50%] bg-repeat [background-image:linear-gradient(to_right,theme(colors.input)_1px,transparent_0),linear-gradient(to_bottom,theme(colors.input)_1px,transparent_0)] [background-size:120px_120px] [height:700vh] [transform-origin:100%_0_0] [width:600vw]"
 8 |       />
 9 |     </div>
10 | 
11 |     <div class="from-background absolute inset-0 bg-gradient-to-t to-transparent to-90%" />
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ScrollArea/Corner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ScrollAreaCorner v-bind="props">
 3 |     <slot />
 4 |   </ScrollAreaCorner>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ScrollAreaCorner } from "radix-vue";
 9 |   import type { ScrollAreaCornerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<ScrollAreaCornerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ScrollArea/ScrollArea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ScrollAreaRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <UiScrollAreaViewport>
 4 |       <slot />
 5 |     </UiScrollAreaViewport>
 6 |     <UiScrollAreaScrollbar :orientation="orientation" />
 7 |     <UiScrollAreaCorner />
 8 |   </ScrollAreaRoot>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { ScrollAreaRoot } from "radix-vue";
13 |   import type { ScrollAreaRootProps } from "radix-vue";
14 | 
15 |   const props = withDefaults(
16 |     defineProps<
17 |       ScrollAreaRootProps & {
18 |         /** Orientation for scrolling */
19 |         orientation?: "vertical" | "horizontal";
20 |         /** Custom class(es) to add to the parent */
21 |         class?: any;
22 |       }
23 |     >(),
24 |     {
25 |       orientation: "vertical",
26 |     }
27 |   );
28 |   const forwarded = reactiveOmit(props, "class");
29 |   const styles = tv({
30 |     base: "relative overflow-hidden",
31 |   });
32 | </script>
33 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ScrollArea/Scrollbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ScrollAreaScrollbar v-bind="forwarded" :class="styles({ orientation, class: props.class })">
 3 |     <slot />
 4 |     <UiScrollAreaThumb />
 5 |   </ScrollAreaScrollbar>
 6 | </template>
 7 | 
 8 | <script lang="ts" setup>
 9 |   import { ScrollAreaScrollbar } from "radix-vue";
10 |   import type { ScrollAreaScrollbarProps } from "radix-vue";
11 | 
12 |   const props = withDefaults(
13 |     defineProps<
14 |       ScrollAreaScrollbarProps & {
15 |         /** Class to apply to the scrollbar */
16 |         class?: any;
17 |       }
18 |     >(),
19 |     {
20 |       orientation: "vertical",
21 |     }
22 |   );
23 |   const forwarded = reactiveOmit(props, "class");
24 |   const styles = tv({
25 |     base: "flex touch-none select-none transition-colors",
26 |     variants: {
27 |       orientation: {
28 |         vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
29 |         horizontal: "h-2.5 border-t border-t-transparent p-[1px]",
30 |       },
31 |     },
32 |   });
33 | </script>
34 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ScrollArea/Thumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ScrollAreaThumb v-bind="forwarded" :class="styles({ orientation, class: props.class })">
 3 |     <slot />
 4 |   </ScrollAreaThumb>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ScrollAreaThumb } from "radix-vue";
 9 |   import type { ScrollAreaThumbProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       ScrollAreaThumbProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |         orientation?: "vertical" | "horizontal";
17 |       }
18 |     >(),
19 |     {
20 |       orientation: "vertical",
21 |     }
22 |   );
23 |   const forwarded = reactiveOmit(props, "class");
24 |   const styles = tv({
25 |     base: "bg-border relative flex-1 rounded-full",
26 |     variants: {
27 |       orientation: {
28 |         vertical: "flex-1",
29 |         horizontal: "",
30 |       },
31 |     },
32 |   });
33 | </script>
34 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ScrollArea/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ScrollAreaViewport v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </ScrollAreaViewport>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ScrollAreaViewport } from "radix-vue";
 9 |   import type { ScrollAreaViewportProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ScrollAreaViewportProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "h-full w-full rounded-[inherit]",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectArrow v-bind="useForwardProps(props)" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { SelectArrow, useForwardProps } from "radix-vue";
 7 |   import type { SelectArrowProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(defineProps<SelectArrowProps>(), {
10 |     width: 10,
11 |     height: 5,
12 |   });
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectGroup v-bind="forwarded">
 3 |     <slot />
 4 |   </SelectGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectGroup, useForwardProps } from "radix-vue";
 9 |   import type { SelectGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<SelectGroupProps>();
12 |   const forwarded = useForwardProps(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectIcon v-bind="forwarded" class="flex items-center justify-center">
 3 |     <slot>
 4 |       <Icon :class="styles({ class: props.class })" :name="icon || 'lucide:chevrons-up-down'" />
 5 |     </slot>
 6 |   </SelectIcon>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { SelectIcon, useForwardProps } from "radix-vue";
11 |   import type { SelectIconProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     SelectIconProps & {
15 |       /** Icon to render */
16 |       icon?: string;
17 |       /** Custom class(es) to add to the parent */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
22 | 
23 |   const styles = tv({
24 |     base: "text-muted-foreground h-4 w-4 shrink-0 opacity-70",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 4 |       <UiSelectItemIndicator :icon="icon" />
 5 |     </span>
 6 |     <UiSelectItemText>
 7 |       <slot>{{ text }}</slot>
 8 |     </UiSelectItemText>
 9 |   </SelectItem>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { SelectItem } from "radix-vue";
14 |   import type { SelectItemProps } from "radix-vue";
15 | 
16 |   const props = defineProps<
17 |     SelectItemProps & {
18 |       /** Custom class(es) to add to the parent */
19 |       class?: any;
20 |       /** Icon to show */
21 |       icon?: string;
22 |       /** Text to show */
23 |       text?: string;
24 |     }
25 |   >();
26 |   const forwarded = reactiveOmit(props, "class", "icon", "text");
27 |   const styles = tv({
28 |     base: "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectItemIndicator v-bind="forwarded" class="flex items-center justify-center">
 3 |     <slot>
 4 |       <Icon :class="styles({ class: props.class })" :name="icon || 'lucide:check'" />
 5 |     </slot>
 6 |   </SelectItemIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { SelectItemIndicator } from "radix-vue";
11 |   import type { SelectItemIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     SelectItemIndicatorProps & {
15 |       /** Icon to render */
16 |       icon?: string;
17 |       /** Custom class(es) to add to the parent */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "icon");
22 |   const styles = tv({
23 |     base: "h-4 w-4",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/ItemText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectItemText v-bind="props">
 3 |     <slot />
 4 |   </SelectItemText>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectItemText } from "radix-vue";
 9 |   import type { SelectItemTextProps } from "radix-vue";
10 | 
11 |   const props = defineProps<SelectItemTextProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectLabel :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </SelectLabel>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectLabel } from "radix-vue";
 9 |   import type { SelectLabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SelectLabelProps & {
13 |       /** Custom class(es) to add to the parent */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "py-1.5 pl-8 pr-2 text-sm font-semibold",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectPortal v-bind="props">
 3 |     <slot />
 4 |   </SelectPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectPortal } from "radix-vue";
 9 |   import type { SelectPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<SelectPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/ScrollDownButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectScrollDownButton v-bind="forwarded">
 3 |     <slot> <Icon :name="icon || 'lucide:chevron-down'" class="h-5 w-5" /></slot>
 4 |   </SelectScrollDownButton>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectScrollDownButton } from "radix-vue";
 9 |   import type { SelectScrollDownButtonProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SelectScrollDownButtonProps & {
13 |       /** Icon to render */
14 |       icon?: string;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "icon");
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/ScrollUpButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectScrollUpButton v-bind="forwarded">
 3 |     <slot>
 4 |       <Icon :name="icon || 'lucide:chevron-up'" class="h-5 w-5" />
 5 |     </slot>
 6 |   </SelectScrollUpButton>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { SelectScrollUpButton } from "radix-vue";
11 |   import type { SelectScrollUpButtonProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     SelectScrollUpButtonProps & {
15 |       /** Icon to render */
16 |       icon?: string;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "icon");
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Select.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </SelectRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { SelectRootEmits, SelectRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<SelectRootProps>();
12 | 
13 |   const emits = defineEmits<SelectRootEmits>();
14 | 
15 |   const forwarded = useForwardPropsEmits(props, emits);
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { SelectSeparator } from "radix-vue";
 7 |   import type { SelectSeparatorProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     SelectSeparatorProps & {
11 |       /** Custom class(es) to add to the parent */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-muted -mx-1 my-1 h-px",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectTrigger :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>
 4 |       <UiSelectValue :placeholder="placeholder" />
 5 |     </slot>
 6 |     <UiSelectIcon :icon="icon" />
 7 |   </SelectTrigger>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { SelectTrigger } from "radix-vue";
12 |   import type { SelectTriggerProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     SelectTriggerProps & {
16 |       /** Custom class(es) to add to the parent */
17 |       class?: any;
18 |       /** Icon to render */
19 |       icon?: string;
20 |       /** Placeholder text */
21 |       placeholder?: string;
22 |     }
23 |   >();
24 |   const forwarded = reactiveOmit(props, "class", "icon", "placeholder");
25 |   const styles = tv({
26 |     base: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring data-[placeholder]:text-muted-foreground line-clamp-1 flex h-10 w-full items-center justify-between truncate rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Value.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectValue v-bind="props">
 3 |     <slot />
 4 |   </SelectValue>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectValue } from "radix-vue";
 9 |   import type { SelectValueProps } from "radix-vue";
10 | 
11 |   const props = defineProps<SelectValueProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Select/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SelectViewport :class="styles({ position, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </SelectViewport>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SelectViewport } from "radix-vue";
 9 |   import type { SelectViewportProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SelectViewportProps & {
13 |       position?: "item-aligned" | "popper";
14 |       /** Custom class(es) to add to the parent */
15 |       class?: any;
16 |     }
17 |   >();
18 |   const forwarded = reactiveOmit(props, "class");
19 |   const styles = tv({
20 |     base: "p-1",
21 |     variants: {
22 |       position: {
23 |         popper:
24 |           "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
25 |         "item-aligned": "",
26 |       },
27 |     },
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Separator v-bind="forwarded" :class="styles({ orientation, class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { Separator, useForwardProps } from "radix-vue";
 7 |   import type { SeparatorProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(defineProps<SeparatorProps & { class?: any }>(), {
10 |     orientation: "horizontal",
11 |   });
12 | 
13 |   const forwarded = useForwardProps(reactiveOmit(props, "class"));
14 | 
15 |   const styles = tv({
16 |     base: "bg-border shrink-0",
17 |     variants: {
18 |       orientation: {
19 |         horizontal: "h-[1px] w-full",
20 |         vertical: "h-full w-[1px]",
21 |       },
22 |     },
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogClose v-bind="props">
 3 |     <slot />
 4 |   </DialogClose>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogClose } from "radix-vue";
 9 |   import type { DialogCloseProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogCloseProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ description }}</slot>
 4 |   </DialogDescription>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogDescription } from "radix-vue";
 9 |   import type { DialogDescriptionProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     DialogDescriptionProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |       /** Description text */
16 |       description?: string;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "description");
20 |   const styles = tv({
21 |     base: "text-muted-foreground text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to parent element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to parent element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 |   const forwarded = reactiveOmit(props, "class");
23 |   const styles = tv({
24 |     base: "flex flex-col space-y-2 text-center sm:text-left",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { DialogOverlay } from "radix-vue";
 7 |   import type { DialogOverlayProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     DialogOverlayProps & {
11 |       /** Custom class(es) to add to parent element */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const forwarded = reactiveOmit(props, "class");
16 |   const styles = tv({
17 |     base: "bg-background/80 data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn fixed inset-0 z-50 backdrop-blur-sm",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogPortal v-bind="props">
 3 |     <slot />
 4 |   </DialogPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogPortal } from "radix-vue";
 9 |   import type { DialogPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Sheet.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </DialogRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DialogRootEmits, DialogRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogRootProps>();
12 |   const emit = defineEmits<DialogRootEmits>();
13 | 
14 |   const forwarded = useForwardPropsEmits(props, emit);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ title }}</slot>
 4 |   </DialogTitle>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogTitle } from "radix-vue";
 9 |   import type { DialogTitleProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     DialogTitleProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |       /** Title text */
16 |       title?: string;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "title");
20 |   const styles = tv({
21 |     base: "text-foreground text-lg font-semibold",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogTrigger v-bind="props">
 3 |     <slot />
 4 |   </DialogTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogTrigger } from "radix-vue";
 9 |   import type { DialogTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Sheet/X.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogClose :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>
 4 |       <Icon :name="icon" class="h-4 w-4" />
 5 |       <span class="sr-only">{{ srText }}</span>
 6 |     </slot>
 7 |   </DialogClose>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { DialogClose } from "radix-vue";
12 |   import type { DialogCloseProps } from "radix-vue";
13 | 
14 |   const props = withDefaults(
15 |     defineProps<
16 |       DialogCloseProps & {
17 |         /** Custom class(es) to add to parent element */
18 |         class?: any;
19 |         /** Icon to display */
20 |         icon?: string;
21 |         /** Screen reader text */
22 |         srText?: string;
23 |       }
24 |     >(),
25 |     {
26 |       icon: "heroicons:x-mark",
27 |       srText: "Close",
28 |     }
29 |   );
30 |   const forwarded = reactiveOmit(props, "class", "icon", "srText");
31 |   const styles = tv({
32 |     base: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
33 |   });
34 | </script>
35 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Skeleton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ loading, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const styles = tv({
12 |     base: "bg-muted animate-pulse rounded-md",
13 |     variants: {
14 |       loading: { true: "cursor-wait", false: "cursor-default" },
15 |     },
16 |   });
17 | 
18 |   const props = withDefaults(
19 |     defineProps<
20 |       PrimitiveProps & {
21 |         /** Custom class(es) to add to parent element */
22 |         class?: any;
23 |         /** Whether the skeleton is loading */
24 |         loading?: boolean;
25 |       }
26 |     >(),
27 |     {
28 |       as: "div",
29 |     }
30 |   );
31 | 
32 |   const forwarded = reactiveOmit(props, "class", "loading");
33 | </script>
34 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Slider/Range.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SliderRange :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </SliderRange>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SliderRange } from "radix-vue";
 9 |   import type { SliderRangeProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SliderRangeProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "bg-primary absolute h-full",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Slider/Thumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SliderThumb :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </SliderThumb>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SliderThumb } from "radix-vue";
 9 |   import type { SliderThumbProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SliderThumbProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "border-primary bg-background ring-offset-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Slider/Track.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SliderTrack :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </SliderTrack>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SliderTrack } from "radix-vue";
 9 |   import type { SliderTrackProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SliderTrackProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "bg-secondary relative h-2 w-full grow overflow-hidden rounded-full",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Splitter/Panel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SplitterPanel
 3 |     v-bind="forwarded"
 4 |     ref="forwardRef"
 5 |     v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"
 6 |   >
 7 |     <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" />
 8 |   </SplitterPanel>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { SplitterPanel, useForwardPropsEmits } from "radix-vue";
13 |   import type { SplitterPanelEmits, SplitterPanelProps } from "radix-vue";
14 | 
15 |   const props = withDefaults(defineProps<SplitterPanelProps>(), {});
16 | 
17 |   const forwardRef = ref<InstanceType<typeof SplitterPanel>>();
18 |   const emit = defineEmits<
19 |     SplitterPanelEmits & {
20 |       ready: [value: InstanceType<typeof SplitterPanel>];
21 |     }
22 |   >();
23 | 
24 |   const forwarded = useForwardPropsEmits(props, emit);
25 | 
26 |   onMounted(async () => {
27 |     await nextTick();
28 |     emit("ready", forwardRef.value!);
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Splitter/Splitter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SplitterGroup
 3 |     v-slot="{ layout }: { layout: number[] }"
 4 |     v-bind="forwarded"
 5 |     :class="styles({ class: props.class })"
 6 |   >
 7 |     <slot :layout="layout" />
 8 |   </SplitterGroup>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { SplitterGroup, useForwardPropsEmits } from "radix-vue";
13 |   import type { SplitterGroupEmits, SplitterGroupProps } from "radix-vue";
14 | 
15 |   const props = withDefaults(
16 |     defineProps<
17 |       SplitterGroupProps & {
18 |         direction?: "horizontal" | "vertical";
19 |         class?: any;
20 |       }
21 |     >(),
22 |     {
23 |       direction: "horizontal",
24 |       as: "div",
25 |       keyboardResizeBy: 10,
26 |     }
27 |   );
28 | 
29 |   const emit = defineEmits<SplitterGroupEmits>();
30 | 
31 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);
32 | 
33 |   const styles = tv({
34 |     base: "flex h-full w-full data-[orientation=vertical]:flex-col",
35 |   });
36 | </script>
37 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperDescription v-slot="slotProps" v-bind="props">
 3 |     <slot v-bind="slotProps" />
 4 |   </StepperDescription>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperDescription } from "radix-vue";
 9 |   import type { StepperDescriptionProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperDescriptionProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperIndicator v-bind="props">
 3 |     <slot />
 4 |   </StepperIndicator>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperIndicator } from "radix-vue";
 9 |   import type { StepperIndicatorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperIndicatorProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperItem v-slot="slotProps" v-bind="props">
 3 |     <slot v-bind="slotProps" />
 4 |   </StepperItem>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperItem } from "radix-vue";
 9 |   import type { StepperItemProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperItemProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperSeparator v-bind="props">
 3 |     <slot />
 4 |   </StepperSeparator>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperSeparator } from "radix-vue";
 9 |   import type { StepperSeparatorProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperSeparatorProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Stepper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperRoot v-slot="slotProps" v-bind="forwarded">
 3 |     <slot v-bind="slotProps" />
 4 |   </StepperRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { StepperRootEmits, StepperRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperRootProps>();
12 |   const emit = defineEmits<StepperRootEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emit);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperTitle v-bind="props">
 3 |     <slot />
 4 |   </StepperTitle>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperTitle } from "radix-vue";
 9 |   import type { StepperTitleProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperTitleProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Stepper/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <StepperTrigger v-bind="props">
 3 |     <slot />
 4 |   </StepperTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { StepperTrigger } from "radix-vue";
 9 |   import type { StepperTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<StepperTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Switch/Switch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SwitchRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <UiSwitchThumb>
 4 |       <slot />
 5 |     </UiSwitchThumb>
 6 |   </SwitchRoot>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { SwitchRoot, useForwardPropsEmits } from "radix-vue";
11 |   import type { SwitchRootEmits, SwitchRootProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       SwitchRootProps & {
16 |         class?: any;
17 |         id?: any;
18 |       }
19 |     >(),
20 |     {
21 |       as: "button",
22 |     }
23 |   );
24 |   const emits = defineEmits<SwitchRootEmits>();
25 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
26 | 
27 |   const styles = tv({
28 |     base: "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Switch/Thumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SwitchThumb :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </SwitchThumb>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { SwitchThumb } from "radix-vue";
 9 |   import type { SwitchThumbProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     SwitchThumbProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Body.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <tbody :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </tbody>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "[&_tr:last-child]:border-0",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Caption.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <caption :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </caption>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "text-muted-foreground mt-4 text-sm",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Cell.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <td :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </td>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "whitespace-nowrap p-4 align-middle",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiTableRow>
 3 |     <UiTableCell :colspan="colspan" :class="styles({ class: props.class })">
 4 |       <slot />
 5 |     </UiTableCell>
 6 |   </UiTableRow>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   const props = withDefaults(
11 |     defineProps<{
12 |       colspan?: number;
13 |       class?: any;
14 |     }>(),
15 |     {
16 |       colspan: 1,
17 |     }
18 |   );
19 | 
20 |   const styles = tv({
21 |     base: "text-foreground whitespace-nowrap p-4 align-middle text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <tfoot :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </tfoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "bg-primary text-primary-foreground font-medium",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Head.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <th :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </th>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "text-muted-foreground hover:text-foreground h-12 px-4 text-left align-middle font-medium",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <thead :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </thead>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "[&_tr]:border-b",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Row.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <tr :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </tr>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Table/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <table :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </table>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   const props = defineProps<{
 9 |     class?: any;
10 |   }>();
11 | 
12 |   const styles = tv({
13 |     base: "w-full caption-bottom border-collapse text-sm",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tabs/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TabsContent v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </TabsContent>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TabsContent } from "radix-vue";
 9 |   import type { TabsContentProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     TabsContentProps & {
13 |       /** Custom class(es) to add to parent element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const forwarded = reactiveOmit(props, "class");
18 |   const styles = tv({
19 |     base: "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tabs/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ClientOnly>
 3 |     <TabsIndicator v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">
 4 |       <slot>
 5 |         <div class="bg-primary h-full w-full rounded-md" />
 6 |       </slot>
 7 |     </TabsIndicator>
 8 |   </ClientOnly>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { TabsIndicator } from "radix-vue";
13 |   import type { TabsIndicatorProps } from "radix-vue";
14 | 
15 |   defineOptions({ inheritAttrs: false });
16 | 
17 |   const props = defineProps<
18 |     TabsIndicatorProps & {
19 |       /** Custom class(es) to add to parent element */
20 |       class?: any;
21 |     }
22 |   >();
23 |   const forwarded = reactiveOmit(props, "class");
24 |   const styles = tv({
25 |     base: "absolute bottom-0 left-0 h-[3px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full px-1 transition-[width,transform] duration-300",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tabs/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TabsList :class="styles({ pill, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </TabsList>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TabsList } from "radix-vue";
 9 |   import type { TabsListProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       TabsListProps & {
14 |         /** Custom class(es) to add to parent element */
15 |         class?: any;
16 |         pill?: boolean;
17 |       }
18 |     >(),
19 |     { pill: true }
20 |   );
21 |   const forwarded = reactiveOmit(props, "class");
22 |   const styles = tv({
23 |     base: "text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
24 |     variants: {
25 |       pill: {
26 |         true: "bg-muted",
27 |         false: "",
28 |       },
29 |     },
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tabs/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TabsRoot v-bind="forwarded">
 3 |     <slot />
 4 |   </TabsRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TabsRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { TabsRootEmits, TabsRootProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(defineProps<TabsRootProps>(), {
12 |     orientation: "horizontal",
13 |     activationMode: "automatic",
14 |   });
15 |   const emits = defineEmits<TabsRootEmits>();
16 |   const forwarded = useForwardPropsEmits(props, emits);
17 | </script>
18 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/TagsInput/Clear.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TagsInputClear v-bind="props" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />
 5 |     </slot>
 6 |   </TagsInputClear>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { TagsInputClear } from "radix-vue";
11 |   import type { TagsInputClearProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(defineProps<TagsInputClearProps & { icon?: string; class?: any }>(), {
14 |     icon: "lucide:x",
15 |   });
16 |   const styles = tv({
17 |     base: "hover:bg-muted-foreground flex items-center justify-center rounded bg-transparent p-1 opacity-40 transition hover:opacity-100 focus:opacity-100 focus-visible:outline-none",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/TagsInput/Field.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TagsInputInput v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </TagsInputInput>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TagsInputInput } from "radix-vue";
 9 |   import type { TagsInputInputProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TagsInputInputProps & { class?: any }>();
12 |   const forwarded = reactiveOmit(props, "class");
13 |   const styles = tv({
14 |     base: "flex-1 bg-transparent focus:outline-none sm:text-sm",
15 |   });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/TagsInput/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TagsInputItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <slot name="text">
 5 |         <UiTagsInputItemText />
 6 |       </slot>
 7 |       <slot name="delete">
 8 |         <UiTagsInputItemDelete :icon="icon" />
 9 |       </slot>
10 |     </slot>
11 |   </TagsInputItem>
12 | </template>
13 | 
14 | <script lang="ts" setup>
15 |   import { TagsInputItem } from "radix-vue";
16 |   import type { TagsInputItemProps } from "radix-vue";
17 | 
18 |   const props = defineProps<TagsInputItemProps & { class?: any; icon?: string }>();
19 |   const forwarded = reactiveOmit(props, "class", "icon");
20 |   const styles = tv({
21 |     base: "bg-primary text-primary-foreground inline-flex h-6 shrink-0 items-center gap-1.5 rounded pl-2 pr-1 leading-none sm:text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/TagsInput/ItemDelete.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TagsInputItemDelete v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />
 5 |     </slot>
 6 |   </TagsInputItemDelete>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { TagsInputItemDelete } from "radix-vue";
11 |   import type { TagsInputItemDeleteProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<TagsInputItemDeleteProps & { icon?: string; class?: any }>(),
15 |     {
16 |       icon: "lucide:x",
17 |     }
18 |   );
19 |   const forwarded = reactiveOmit(props, "class", "icon");
20 |   const styles = tv({
21 |     base: "hover:bg-muted-foreground flex items-center justify-center rounded bg-transparent opacity-40 transition hover:opacity-100 focus:opacity-100 focus-visible:outline-none",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/TagsInput/ItemText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TagsInputItemText v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </TagsInputItemText>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TagsInputItemText } from "radix-vue";
 9 |   import type { TagsInputItemTextProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TagsInputItemTextProps & { class?: any }>();
12 |   const forwarded = reactiveOmit(props, "class");
13 |   const styles = tv({
14 |     base: "leading-none sm:text-sm",
15 |   });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/TagsInput/TagsInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TagsInputRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |   </TagsInputRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TagsInputRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { TagsInputRootEmits, TagsInputRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TagsInputRootProps & { class?: any }>();
12 |   const emits = defineEmits<TagsInputRootEmits>();
13 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
14 | 
15 |   const styles = tv({
16 |     base: "border-input bg-background focus-within:ring-ring focus-within:ring-offset-background flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border px-3 py-2 leading-none transition focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Textarea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <textarea v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   const props = defineProps<{
 7 |     class?: any;
 8 |     name?: string;
 9 |     id?: string;
10 |     placeholder?: string;
11 |     required?: boolean;
12 |     disabled?: boolean;
13 |     rows?: number;
14 |     modelValue?: string;
15 |   }>();
16 | 
17 |   const emits = defineEmits<{
18 |     "update:modelValue": [value: any];
19 |   }>();
20 | 
21 |   const localModel = useVModel(props, "modelValue", emits);
22 | 
23 |   const styles = tv({
24 |     base: "form-textarea border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:border-input focus:ring-offset-background focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Toast/Action.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastAction :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </ToastAction>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastAction } from "radix-vue";
 9 |   import type { ToastActionProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       ToastActionProps & {
14 |         /**
15 |          * Custom class names to add to the button.
16 |          */
17 |         class?: any;
18 |       }
19 |     >(),
20 |     {
21 |       altText: "Action button",
22 |     }
23 |   );
24 |   const forwarded = reactiveOmit(props, "class");
25 |   const styles = tv({
26 |     base: "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Toast/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastClose :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>
 4 |       <Icon :name="icon || 'lucide:x'" class="h-4 w-4" />
 5 |     </slot>
 6 |   </ToastClose>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { ToastClose } from "radix-vue";
11 |   import type { ToastCloseProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     ToastCloseProps & {
15 |       /**
16 |        * Custom class names to add to the button.
17 |        */
18 |       class?: any;
19 |       /**
20 |        * The icon to render.
21 |        */
22 |       icon?: string;
23 |     }
24 |   >();
25 |   const forwarded = reactiveOmit(props, "class", "icon");
26 |   const styles = tv({
27 |     base: "text-foreground/50 hover:text-foreground focus-visible:ring-ring absolute right-2 top-2 inline-flex items-center justify-center rounded-md p-1 opacity-50 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Toast/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastDescription :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ description }}</slot>
 4 |   </ToastDescription>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastDescription } from "radix-vue";
 9 |   import type { ToastDescriptionProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ToastDescriptionProps & {
13 |       /** The description text to render */
14 |       description?: string;
15 |       /** Custom class(es) to add to the parent */
16 |       class?: any;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "description");
20 |   const styles = tv({
21 |     base: "text-sm opacity-90",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Toast/Provider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastProvider v-bind="props">
 3 |     <slot />
 4 |   </ToastProvider>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastProvider } from "radix-vue";
 9 |   import type { ToastProviderProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(defineProps<ToastProviderProps>(), {
12 |     label: "Notification",
13 |     swipeDirection: "right",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Toast/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastTitle :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>{{ title }}</slot>
 4 |   </ToastTitle>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastTitle } from "radix-vue";
 9 |   import type { ToastTitleProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ToastTitleProps & {
13 |       /** The title text to render */
14 |       title?: string;
15 |       /** Custom class(es) to add to the parent */
16 |       class?: any;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class", "title");
20 |   const styles = tv({
21 |     base: "text-sm font-semibold",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Toast/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastViewport :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </ToastViewport>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastViewport } from "radix-vue";
 9 |   import type { ToastViewportProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ToastViewportProps & {
13 |       /**
14 |        * Custom class names to add to the button.
15 |        */
16 |       class?: any;
17 |     }
18 |   >();
19 |   const forwarded = reactiveOmit(props, "class");
20 |   const styles = tv({
21 |     base: "focus-visible:ring-ring fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",
22 |   });
23 | </script>
24 | 
25 | <style>
26 |   [aria-label~="Notifications"] {
27 |     display: grid;
28 |   }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/ToggleGroup/ToggleGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToggleGroupRoot
 3 |     v-slot="{ modelValue }"
 4 |     v-bind="forwarded"
 5 |     :class="styles({ class: props.class })"
 6 |   >
 7 |     <slot :model-value="modelValue" />
 8 |   </ToggleGroupRoot>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { ToggleGroupRoot, useForwardPropsEmits } from "radix-vue";
13 |   import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "radix-vue";
14 | 
15 |   const props = withDefaults(
16 |     defineProps<
17 |       ToggleGroupRootProps & {
18 |         /** custom class to add to the parent */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     {
23 |       type: "single",
24 |     }
25 |   );
26 | 
27 |   const emit = defineEmits<ToggleGroupRootEmits>();
28 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);
29 | 
30 |   const styles = tv({
31 |     base: "flex items-center justify-center gap-1",
32 |   });
33 | </script>
34 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tooltip/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TooltipArrow v-bind="props" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { TooltipArrow } from "radix-vue";
 7 |   import type { TooltipArrowProps } from "radix-vue";
 8 | 
 9 |   const props = withDefaults(defineProps<TooltipArrowProps>(), {
10 |     width: 10,
11 |     height: 5,
12 |   });
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tooltip/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TooltipPortal v-bind="props">
 3 |     <slot />
 4 |   </TooltipPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TooltipPortal } from "radix-vue";
 9 |   import type { TooltipPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TooltipPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tooltip/Provider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TooltipProvider v-bind="props">
 3 |     <slot />
 4 |   </TooltipProvider>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TooltipProvider } from "radix-vue";
 9 |   import type { TooltipProviderProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TooltipProviderProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tooltip/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiTooltipProvider v-bind="props">
 3 |     <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">
 4 |       <slot>
 5 |         <slot name="trigger" />
 6 |         <slot name="content" />
 7 |       </slot>
 8 |     </TooltipRoot>
 9 |   </UiTooltipProvider>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { TooltipRoot, useForwardPropsEmits } from "radix-vue";
14 |   import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "radix-vue";
15 | 
16 |   defineOptions({ inheritAttrs: false });
17 |   const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {
18 |     delayDuration: 200,
19 |   });
20 | 
21 |   const emits = defineEmits<TooltipRootEmits>();
22 | 
23 |   const forwarded = useForwardPropsEmits(props, emits);
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tooltip/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TooltipTrigger v-bind="props">
 3 |     <slot />
 4 |   </TooltipTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TooltipTrigger } from "radix-vue";
 9 |   import type { TooltipTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TooltipTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tree/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TreeItem v-slot="slotProps" v-bind="forwarded">
 3 |     <slot v-bind="slotProps" />
 4 |   </TreeItem>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup generic="T extends Record<string, any>">
 8 |   import { TreeItem, useForwardPropsEmits } from "radix-vue";
 9 |   import type { TreeItemEmits, TreeItemProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TreeItemProps<T>>();
12 |   const emit = defineEmits<TreeItemEmits<T>>();
13 | 
14 |   const forwarded = useForwardPropsEmits(props, emit);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tree/Tree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TreeRoot v-slot="slotProps" v-bind="forwarded">
 3 |     <slot v-bind="slotProps" />
 4 |   </TreeRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TreeRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { TreeRootEmits, TreeRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TreeRootProps>();
12 |   const emit = defineEmits<TreeRootEmits>();
13 | 
14 |   const forwarded = useForwardPropsEmits(props, emit);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/docs/app/components/Ui/Tree/Virtualizer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TreeVirtualizer v-slot="slotProps" v-bind="forwarded">
 3 |     <slot v-bind="slotProps" />
 4 |   </TreeVirtualizer>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { TreeVirtualizer, useForwardPropsEmits } from "radix-vue";
 9 |   import type { TreeVirtualizerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<TreeVirtualizerProps>();
12 |   const forwarded = useForwardPropsEmits(props);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/docs/app/components/content/prose/ProseAlert.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <UiAlert />
3 | </template>
4 | 
5 | <script lang="ts" setup></script>
6 | 


--------------------------------------------------------------------------------
/docs/app/components/content/prose/ProseTable.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="w-full overflow-x-auto rounded-lg border">
3 |     <table class="my-0">
4 |       <slot />
5 |     </table>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/docs/app/composables/useFormField.ts:
--------------------------------------------------------------------------------
 1 | import { FORM_ITEM_INJECTION_KEY } from "@/components/Ui/Form/Item.vue";
 2 | import {
 3 |   FieldContextKey,
 4 |   useFieldError,
 5 |   useIsFieldDirty,
 6 |   useIsFieldTouched,
 7 |   useIsFieldValid,
 8 | } from "vee-validate";
 9 | import { inject } from "vue";
10 | 
11 | export function useFormField() {
12 |   const fieldContext = inject(FieldContextKey);
13 |   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
14 | 
15 |   const fieldState = {
16 |     valid: useIsFieldValid(),
17 |     isDirty: useIsFieldDirty(),
18 |     isTouched: useIsFieldTouched(),
19 |     error: useFieldError(),
20 |   };
21 | 
22 |   if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
23 | 
24 |   const { name } = fieldContext;
25 |   const id = fieldItemContext;
26 | 
27 |   return {
28 |     id,
29 |     name,
30 |     formItemId: `${id}-form-item`,
31 |     formDescriptionId: `${id}-form-item-description`,
32 |     formMessageId: `${id}-form-item-message`,
33 |     ...fieldState,
34 |   };
35 | }
36 | 


--------------------------------------------------------------------------------
/docs/app/composables/useShortcuts.ts:
--------------------------------------------------------------------------------
 1 | export const _useShortcuts = () => {
 2 |   const macOS = computed(
 3 |     () =>
 4 |       import.meta.client &&
 5 |       navigator &&
 6 |       navigator.userAgent &&
 7 |       navigator.userAgent.match(/Macintosh;/)
 8 |   );
 9 | 
10 |   const metaSymbol = ref(" ");
11 | 
12 |   const activeElement = useActiveElement();
13 |   const usingInput = computed(() => {
14 |     const usingInput = !!(
15 |       activeElement.value?.tagName === "INPUT" ||
16 |       activeElement.value?.tagName === "TEXTAREA" ||
17 |       activeElement.value?.contentEditable === "true"
18 |     );
19 | 
20 |     if (usingInput) {
21 |       return ((activeElement.value as any)?.name as string) || true;
22 |     }
23 | 
24 |     return false;
25 |   });
26 | 
27 |   onMounted(() => {
28 |     metaSymbol.value = macOS.value ? "⌘" : "Ctrl";
29 |   });
30 | 
31 |   return {
32 |     macOS,
33 |     metaSymbol,
34 |     activeElement,
35 |     usingInput,
36 |   };
37 | };
38 | 
39 | export const useShortcuts = createSharedComposable(_useShortcuts);
40 | 


--------------------------------------------------------------------------------
/docs/app/layouts/blank.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <MainNav />
4 |     <slot />
5 |   </div>
6 | </template>
7 | 
8 | <script lang="ts" setup></script>
9 | 


--------------------------------------------------------------------------------
/docs/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <NuxtLayout name="blank">
 4 |       <ContentDoc :content="page" />
 5 |     </NuxtLayout>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   const { data: page } = await useAsyncData("index", () => queryContent("/").findOne());
11 | 
12 |   useSeoMeta({
13 |     twitterTitle: page.value?.title,
14 |     twitterDescription: page.value?.description,
15 |     twitterCard: "summary_large_image",
16 |     themeColor: "#3b82f6",
17 |   });
18 | 
19 |   useHead({
20 |     htmlAttrs: { lang: "en" },
21 |     link: [{ rel: "icon", type: "image/png", href: "/icon.png" }],
22 |   });
23 |   const dir = computed(() => page.value?._dir?.replace(/-/g, " "));
24 | 
25 |   defineOgImageComponent("Docs", {
26 |     headline: dir.value,
27 |     title: page.value?.title,
28 |     description: page.value?.description,
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/docs/app/plugins/datatables.client.ts:
--------------------------------------------------------------------------------
 1 | import DataTablesCore from "datatables.net";
 2 | import DataTable from "datatables.net-vue3";
 3 | import JSZip from "jszip";
 4 | 
 5 | import "datatables.net-buttons";
 6 | import "datatables.net-buttons-dt";
 7 | import "datatables.net-buttons/js/buttons.colVis.mjs";
 8 | import "datatables.net-buttons/js/buttons.html5.mjs";
 9 | import "datatables.net-buttons/js/buttons.print.mjs";
10 | import "datatables.net-responsive-dt";
11 | import "datatables.net-searchbuilder-dt";
12 | import "datatables.net-select-dt";
13 | 
14 | // @ts-expect-error - We are not creating a declaration file for this library
15 | window.JSZip = JSZip;
16 | 
17 | DataTable.use(DataTablesCore);
18 | 
19 | export default defineNuxtPlugin((nuxtApp) => {
20 |   nuxtApp.vueApp.component("DataTable", DataTable);
21 | });
22 | 


--------------------------------------------------------------------------------
/docs/app/utils/shared.styles.ts:
--------------------------------------------------------------------------------
 1 | // Add here because button styles are used in several components
 2 | export const buttonStyles = tv({
 3 |   base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 4 |   variants: {
 5 |     variant: {
 6 |       default: "bg-primary text-primary-foreground hover:bg-primary/90",
 7 |       destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 8 |       outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
 9 |       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
10 |       ghost: "hover:bg-accent hover:text-accent-foreground",
11 |       link: "text-primary underline-offset-4 hover:underline",
12 |     },
13 |     size: {
14 |       default: "h-10 px-4 py-2",
15 |       sm: "h-9 rounded-md px-3",
16 |       lg: "h-11 rounded-md px-8",
17 |       "icon-sm": "h-9 w-9",
18 |       icon: "h-10 w-10",
19 |     },
20 |     disabled: {
21 |       true: "pointer-events-none opacity-50",
22 |     },
23 |   },
24 |   defaultVariants: {
25 |     variant: "default",
26 |     size: "default",
27 |   },
28 | });
29 | 


--------------------------------------------------------------------------------
/docs/content/1.introduction/2.devtools.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Devtools
 3 | description: Quickly browse the pdfmake documentation in the Nuxt devtools.
 4 | ---
 5 | 
 6 | The module adds a new tab to the Nuxt devtools that allows you to view the [pdfMake](https://pdfmake.github.io/docs/0.1/getting-started/client-side/) docs.
 7 | 
 8 | This can be disabled by setting `enableDevtools` to `false` in the module options.
 9 | 
10 | ```ts [nuxt.config.js]
11 | export default defineNuxtConfig({
12 |   pdfmake:{
13 |     enableDevtools: false;
14 |   }
15 | });
16 | ```
17 | 


--------------------------------------------------------------------------------
/docs/content/1.introduction/_dir.yml:
--------------------------------------------------------------------------------
1 | icon: heroicons:rocket-launch
2 | title: "Getting Started"
3 | 


--------------------------------------------------------------------------------
/docs/content/2.examples/_dir.yml:
--------------------------------------------------------------------------------
1 | title: "Examples"
2 | icon: vscode-icons:file-type-pdf2
3 | 


--------------------------------------------------------------------------------
/docs/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import withNuxt from "./.nuxt/eslint.config.mjs";
 3 | 
 4 | export default withNuxt({
 5 |   rules: {
 6 |     "@typescript-eslint/no-explicit-any": "off",
 7 |     "vue/no-v-html": "off",
 8 |     "vue/require-default-prop": "off",
 9 |     "@typescript-eslint/ban-types": "off",
10 |     "vue/html-self-closing": "off",
11 |     "@typescript-eslint/no-unsafe-function-type": "off",
12 |     "@typescript-eslint/no-empty-object-type": "off",
13 |   },
14 | });
15 | 


--------------------------------------------------------------------------------
/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/favicon.ico


--------------------------------------------------------------------------------
/docs/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icon.png


--------------------------------------------------------------------------------
/docs/public/icons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/apple-touch-icon.png


--------------------------------------------------------------------------------
/docs/public/icons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/favicon-16x16.png


--------------------------------------------------------------------------------
/docs/public/icons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/favicon-32x32.png


--------------------------------------------------------------------------------
/docs/public/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/favicon.ico


--------------------------------------------------------------------------------
/docs/public/icons/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/pwa-192x192.png


--------------------------------------------------------------------------------
/docs/public/icons/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/pwa-512x512.png


--------------------------------------------------------------------------------
/docs/public/icons/pwa-maskable-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/pwa-maskable-192x192.png


--------------------------------------------------------------------------------
/docs/public/icons/pwa-maskable-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/nuxt-pdfmake/32454670a3f0d19be1d31aa1099a76252f87f42d/docs/public/icons/pwa-maskable-512x512.png


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/ui-thing.config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   theme: "blue",
 3 |   tailwindCSSLocation: "app/assets/css/tailwind.css",
 4 |   tailwindConfigLocation: "tailwind.config.js",
 5 |   componentsLocation: "app/components/Ui",
 6 |   composablesLocation: "app/composables",
 7 |   utilsLocation: "app/utils",
 8 |   pluginsLocation: "app/plugins",
 9 |   force: true,
10 |   useDefaultFilename: true,
11 |   packageManager: "npm",
12 | };
13 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { createConfigForNuxt } from "@nuxt/eslint-config/flat";
 2 | 
 3 | export default createConfigForNuxt({
 4 |   features: {
 5 |     tooling: true,
 6 |   },
 7 |   // options here
 8 | })
 9 |   .override("nuxt/vue/rules", {
10 |     rules: {
11 |       "vue/multi-word-component-names": "off",
12 |       "vue/require-default-prop": "off",
13 |       "vue/no-v-html": "off",
14 |     },
15 |     ignores: ["dist", "node_modules", ".nuxt"],
16 |   })
17 |   .override("nuxt/typescript/rules", {
18 |     rules: {
19 |       "@typescript-eslint/no-unused-vars": "off",
20 |       "@typescript-eslint/no-explicit-any": "off",
21 |       "@typescript-eslint/no-invalid-void-type": "off",
22 |       "@typescript-eslint/no-empty-object-type": "off",
23 |       "@typescript-eslint/no-unsafe-function-type": "off",
24 |     },
25 |   });
26 | 


--------------------------------------------------------------------------------
/playground/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "always",
 3 |   "endOfLine": "lf",
 4 |   "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
 5 |   "printWidth": 100,
 6 |   "semi": true,
 7 |   "singleQuote": false,
 8 |   "tabWidth": 2,
 9 |   "trailingComma": "es5",
10 |   "useTabs": false,
11 |   "vueIndentScriptAndStyle": true,
12 |   "tailwindFunctions": ["tv"],
13 |   "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
14 | }
15 | 


--------------------------------------------------------------------------------
/playground/components/Ui/Avatar/Fallback.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarFallback :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot>
 4 |       {{ fallback }}
 5 |     </slot>
 6 |   </AvatarFallback>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { AvatarFallback } from "radix-vue";
11 |   import type { AvatarFallbackProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     AvatarFallbackProps & {
15 |       /** The text to display inside th eavatar */
16 |       fallback?: string;
17 |       /** Custom class(es) to add to the element */
18 |       class?: any;
19 |     }
20 |   >();
21 |   const forwarded = reactiveOmit(props, "class", "fallback");
22 |   const styles = tv({
23 |     base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/playground/components/Ui/Avatar/Image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarImage v-bind="forwarded" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { AvatarImage, useForwardPropsEmits } from "radix-vue";
 7 |   import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     AvatarImageProps & {
11 |       /** The alt text for the image */
12 |       alt?: string;
13 |       /** Custom class(es) to add to the element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const emits = defineEmits<AvatarImageEmits>();
18 | 
19 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
20 | 
21 |   const styles = tv({
22 |     base: "aspect-square h-full w-full object-cover",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/playground/components/Ui/Container.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         class?: any;
15 |       }
16 |     >(),
17 |     {
18 |       as: "div",
19 |     }
20 |   );
21 | 
22 |   const forwarded = reactiveOmit(props, "class");
23 | 
24 |   const styles = tv({
25 |     base: "container mx-auto",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/playground/components/Ui/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { reactiveOmit } from "@vueuse/core";
 9 |   import { Primitive } from "radix-vue";
10 |   import type { PrimitiveProps } from "radix-vue";
11 | 
12 |   const props = withDefaults(
13 |     defineProps<
14 |       PrimitiveProps & {
15 |         /** Custom class(es) to add to the parent */
16 |         class?: any;
17 |         /** Whether the navbar should be sticky */
18 |         sticky?: boolean;
19 |       }
20 |     >(),
21 |     {
22 |       as: "header",
23 |     }
24 |   );
25 | 
26 |   const forwarded = reactiveOmit(props, "class", "sticky");
27 | 
28 |   const styles = tv({
29 |     base: "z-20 border-b bg-background/90 backdrop-blur",
30 |     variants: {
31 |       sticky: {
32 |         true: "sticky top-0",
33 |       },
34 |     },
35 |   });
36 | </script>
37 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import pdfMakeMopdule from "../src/module";
 2 | 
 3 | export default defineNuxtConfig({
 4 |   modules: [
 5 |     pdfMakeMopdule,
 6 |     "@nuxt/devtools",
 7 |     "@nuxtjs/tailwindcss",
 8 |     "@nuxtjs/color-mode",
 9 |     "@vueuse/nuxt",
10 |     "nuxt-icon",
11 |   ],
12 | 
13 |   app: {
14 |     head: {
15 |       link: [
16 |         // Inter font
17 |         { rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
18 |       ],
19 |     },
20 |   },
21 | 
22 |   pdfmake: {},
23 | 
24 |   tailwindcss: {
25 |     exposeConfig: true,
26 |   },
27 | 
28 |   colorMode: {
29 |     classSuffix: "",
30 |   },
31 | 
32 |   typescript: {
33 |     shim: false,
34 |   },
35 | 
36 |   imports: {
37 |     imports: [
38 |       {
39 |         from: "tailwind-variants",
40 |         name: "tv",
41 |       },
42 |       {
43 |         from: "tailwind-variants",
44 |         name: "VariantProps",
45 |         type: true,
46 |       },
47 |     ],
48 |   },
49 | 
50 |   compatibilityDate: "2024-08-18",
51 | });
52 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-module-playground",
 3 |   "private": false,
 4 |   "license": "MIT",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "build": "nuxi build",
 8 |     "dev": "nuxi dev",
 9 |     "generate": "nuxi generate",
10 |     "postinstall": "nuxi prepare"
11 |   },
12 |   "dependencies": {
13 |     "radix-vue": "^1.9.13",
14 |     "tailwind-variants": "^0.3.1"
15 |   },
16 |   "devDependencies": {
17 |     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
18 |     "@nuxtjs/color-mode": "^3.5.2",
19 |     "@nuxtjs/tailwindcss": "^6.13.1",
20 |     "@vueuse/nuxt": "^12.5.0",
21 |     "nuxt": "3.15.4",
22 |     "nuxt-icon": "^0.6.10",
23 |     "prettier": "^3.4.2",
24 |     "prettier-plugin-tailwindcss": "^0.6.11",
25 |     "tailwindcss-animate": "^1.0.7",
26 |     "typescript": "^5.7.3"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/playground/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/ui-thing.config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   theme: "zinc",
 3 |   tailwindCSSLocation: "assets/css/tailwind.css",
 4 |   tailwindConfigLocation: "tailwind.config.js",
 5 |   componentsLocation: "components/Ui",
 6 |   composablesLocation: "composables",
 7 |   utilsLocation: "utils",
 8 |   force: true,
 9 |   useDefaultFilename: true,
10 |   packageManager: "npm",
11 | };
12 | 


--------------------------------------------------------------------------------
/playground/utils/shared.styles.ts:
--------------------------------------------------------------------------------
 1 | // Add here because button styles are used in several components
 2 | export const buttonStyles = tv({
 3 |   base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 4 |   variants: {
 5 |     variant: {
 6 |       default: "bg-primary text-primary-foreground hover:bg-primary/90",
 7 |       destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 8 |       outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 9 |       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
10 |       ghost: "hover:bg-accent hover:text-accent-foreground",
11 |       link: "text-primary underline-offset-4 hover:underline",
12 |     },
13 |     size: {
14 |       default: "h-10 px-4 py-2",
15 |       sm: "h-9 rounded-md px-3",
16 |       lg: "h-11 rounded-md px-8",
17 |       "icon-sm": "h-9 w-9",
18 |       icon: "h-10 w-10",
19 |     },
20 |     disabled: {
21 |       true: "pointer-events-none opacity-50",
22 |     },
23 |   },
24 |   defaultVariants: {
25 |     variant: "default",
26 |     size: "default",
27 |   },
28 | });
29 | 


--------------------------------------------------------------------------------
/src/runtime/composables/usePDFMake.ts:
--------------------------------------------------------------------------------
 1 | import { useNuxtApp } from "#imports";
 2 | 
 3 | /**
 4 |  * A composable that returns the pdfMake instance.
 5 |  * @returns The pdfMake instance.
 6 |  * @example
 7 |  * ```ts
 8 |  * const pdfMake = usePDFMake();
 9 |  * // The full signature of createPdf looks like this.
10 |  * // tableLayouts, fonts and vfs are all optional - falsy values will cause
11 |  * // pdfMake.tableLayouts, pdfMake.fonts or pdfMake.vfs to be used.
12 |  * pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)
13 |  * ```
14 |  * @see https://pdfmake.github.io/docs/0.1/getting-started/client-side/methods/
15 |  */
16 | export const usePDFMake = () => {
17 |   return useNuxtApp().$pdfMake;
18 | };
19 | 


--------------------------------------------------------------------------------
/src/runtime/pdfmake.client.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtPlugin } from "#app";
 2 | 
 3 | export default defineNuxtPlugin(async () => {
 4 |   return {
 5 |     provide: {
 6 |       pdfMake: window.pdfMake,
 7 |     },
 8 |   };
 9 | });
10 | 
11 | declare module "#app" {
12 |   interface NuxtApp {
13 |     $pdfMake: typeof import("pdfmake/build/pdfmake");
14 |   }
15 | }
16 | 
17 | declare module "vue" {
18 |   interface ComponentCustomProperties {
19 |     $pdfMake: typeof import("pdfmake/build/pdfmake");
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/test/basic.test.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath } from "node:url";
 2 | import { $fetch, setup } from "@nuxt/test-utils";
 3 | import { describe, expect, it } from "vitest";
 4 | 
 5 | describe("ssr", async () => {
 6 |   await setup({
 7 |     rootDir: fileURLToPath(new URL("./fixtures/basic", import.meta.url)),
 8 |   });
 9 | 
10 |   it("renders the index page", async () => {
11 |     // Get response to a server-rendered page with `$fetch`.
12 |     const html = await $fetch("/");
13 |     expect(html).toContain("<div>basic</div>");
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>basic</div>
3 | </template>
4 | 
5 | <script setup></script>
6 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import MyModule from "../../../src/module";
2 | 
3 | export default defineNuxtConfig({
4 |   modules: [MyModule],
5 | });
6 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "basic",
4 |   "type": "module"
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./playground/.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------