├── .env.example
├── .vscode
    └── settings.json
├── server
    └── tsconfig.json
├── public
    ├── icon.png
    ├── favicon.ico
    └── icons
    │   ├── favicon.ico
    │   ├── pwa-192x192.png
    │   ├── pwa-512x512.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── apple-touch-icon.png
    │   ├── pwa-maskable-192x192.png
    │   └── pwa-maskable-512x512.png
├── content
    └── 1.getting-started
    │   ├── _dir.yml
    │   └── 2.usage.md
├── app
    ├── components
    │   ├── Ui
    │   │   ├── Sidebar
    │   │   │   ├── MenuSubItem.vue
    │   │   │   ├── Footer.vue
    │   │   │   ├── Header.vue
    │   │   │   ├── Menu.vue
    │   │   │   ├── MenuItem.vue
    │   │   │   ├── Group.vue
    │   │   │   ├── GroupContent.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Content.vue
    │   │   │   ├── Input.vue
    │   │   │   ├── MenuSub.vue
    │   │   │   ├── Inset.vue
    │   │   │   ├── MenuBadge.vue
    │   │   │   ├── GroupAction.vue
    │   │   │   ├── GroupLabel.vue
    │   │   │   └── Trigger.vue
    │   │   ├── Menubar
    │   │   │   ├── Portal.vue
    │   │   │   ├── Menu.vue
    │   │   │   ├── Group.vue
    │   │   │   ├── Arrow.vue
    │   │   │   ├── Sub.vue
    │   │   │   ├── RadioGroup.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Shortcut.vue
    │   │   │   ├── Label.vue
    │   │   │   ├── ItemIndicator.vue
    │   │   │   ├── Menubar.vue
    │   │   │   └── Trigger.vue
    │   │   ├── Form
    │   │   │   ├── Message.vue
    │   │   │   ├── Control.vue
    │   │   │   ├── Description.vue
    │   │   │   ├── Label.vue
    │   │   │   └── Item.vue
    │   │   ├── Table
    │   │   │   ├── Header.vue
    │   │   │   ├── Body.vue
    │   │   │   ├── Caption.vue
    │   │   │   ├── Table.vue
    │   │   │   ├── Cell.vue
    │   │   │   ├── Footer.vue
    │   │   │   ├── Row.vue
    │   │   │   ├── Head.vue
    │   │   │   └── Empty.vue
    │   │   ├── AspectRatio.vue
    │   │   ├── Dialog
    │   │   │   ├── Close.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Dialog.vue
    │   │   │   ├── Overlay.vue
    │   │   │   ├── Header.vue
    │   │   │   ├── Footer.vue
    │   │   │   ├── Title.vue
    │   │   │   └── Description.vue
    │   │   ├── Select
    │   │   │   ├── Value.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── ItemText.vue
    │   │   │   ├── Arrow.vue
    │   │   │   ├── Group.vue
    │   │   │   ├── Select.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── ScrollDownButton.vue
    │   │   │   ├── ScrollUpButton.vue
    │   │   │   ├── Label.vue
    │   │   │   ├── ItemIndicator.vue
    │   │   │   ├── Icon.vue
    │   │   │   ├── Viewport.vue
    │   │   │   ├── Item.vue
    │   │   │   └── Trigger.vue
    │   │   ├── Sheet
    │   │   │   ├── Close.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Sheet.vue
    │   │   │   ├── Overlay.vue
    │   │   │   ├── Title.vue
    │   │   │   ├── Header.vue
    │   │   │   ├── Footer.vue
    │   │   │   ├── Description.vue
    │   │   │   └── X.vue
    │   │   ├── Editable
    │   │   │   ├── Area.vue
    │   │   │   ├── Input.vue
    │   │   │   ├── Preview.vue
    │   │   │   ├── Edit.vue
    │   │   │   ├── Cancel.vue
    │   │   │   ├── Submit.vue
    │   │   │   └── Editable.vue
    │   │   ├── Stepper
    │   │   │   ├── Title.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Indicator.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Item.vue
    │   │   │   ├── Description.vue
    │   │   │   └── Stepper.vue
    │   │   ├── Tooltip
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Provider.vue
    │   │   │   ├── Arrow.vue
    │   │   │   └── Tooltip.vue
    │   │   ├── Autocomplete
    │   │   │   ├── Empty.vue
    │   │   │   ├── Group.vue
    │   │   │   ├── Cancel.vue
    │   │   │   ├── Viewport.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Arrow.vue
    │   │   │   ├── ItemIndicator.vue
    │   │   │   ├── Label.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Input.vue
    │   │   │   ├── Autocomplete.vue
    │   │   │   ├── Anchor.vue
    │   │   │   └── Item.vue
    │   │   ├── Popover
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Close.vue
    │   │   │   ├── Anchor.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Arrow.vue
    │   │   │   ├── Popover.vue
    │   │   │   └── X.vue
    │   │   ├── HoverCard
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── HoverCard.vue
    │   │   │   └── Arrow.vue
    │   │   ├── ContextMenu
    │   │   │   ├── Group.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Sub.vue
    │   │   │   ├── ContextMenu.vue
    │   │   │   ├── Shortcut.vue
    │   │   │   ├── RadioGroup.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Arrow.vue
    │   │   │   ├── ItemIndicator.vue
    │   │   │   └── Label.vue
    │   │   ├── ScrollArea
    │   │   │   ├── Corner.vue
    │   │   │   ├── Viewport.vue
    │   │   │   ├── Thumb.vue
    │   │   │   ├── ScrollArea.vue
    │   │   │   └── Scrollbar.vue
    │   │   ├── AlertDialog
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Overlay.vue
    │   │   │   ├── Title.vue
    │   │   │   ├── Header.vue
    │   │   │   ├── Footer.vue
    │   │   │   └── Description.vue
    │   │   ├── DropdownMenu
    │   │   │   ├── Group.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Sub.vue
    │   │   │   ├── DropdownMenu.vue
    │   │   │   ├── RadioGroup.vue
    │   │   │   ├── Separator.vue
    │   │   │   ├── Shortcut.vue
    │   │   │   ├── Arrow.vue
    │   │   │   ├── Label.vue
    │   │   │   └── ItemIndicator.vue
    │   │   ├── NavigationMenu
    │   │   │   ├── Item.vue
    │   │   │   ├── Sub.vue
    │   │   │   ├── Link.vue
    │   │   │   ├── List.vue
    │   │   │   ├── NavigationMenu.vue
    │   │   │   ├── Indicator.vue
    │   │   │   ├── Viewport.vue
    │   │   │   └── Content.vue
    │   │   ├── Drawer
    │   │   │   ├── Close.vue
    │   │   │   ├── Portal.vue
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Drawer.vue
    │   │   │   ├── Overlay.vue
    │   │   │   ├── Title.vue
    │   │   │   ├── Description.vue
    │   │   │   ├── Footer.vue
    │   │   │   ├── Header.vue
    │   │   │   └── Content.vue
    │   │   ├── Listbox
    │   │   │   ├── Group.vue
    │   │   │   ├── GroupLabel.vue
    │   │   │   ├── Content.vue
    │   │   │   ├── Virtualizer.vue
    │   │   │   ├── ItemIndicator.vue
    │   │   │   ├── Listbox.vue
    │   │   │   ├── Filter.vue
    │   │   │   └── Item.vue
    │   │   ├── Toast
    │   │   │   ├── Provider.vue
    │   │   │   ├── Title.vue
    │   │   │   ├── Description.vue
    │   │   │   ├── Viewport.vue
    │   │   │   ├── Close.vue
    │   │   │   └── Action.vue
    │   │   ├── Collapsible
    │   │   │   ├── Trigger.vue
    │   │   │   ├── Collapsible.vue
    │   │   │   └── Content.vue
    │   │   ├── Tree
    │   │   │   ├── Virtualizer.vue
    │   │   │   ├── Tree.vue
    │   │   │   └── Item.vue
    │   │   ├── Tabs
    │   │   │   ├── Tabs.vue
    │   │   │   ├── Content.vue
    │   │   │   ├── List.vue
    │   │   │   └── Indicator.vue
    │   │   ├── TagsInput
    │   │   │   ├── ItemText.vue
    │   │   │   ├── Field.vue
    │   │   │   ├── Clear.vue
    │   │   │   ├── Item.vue
    │   │   │   ├── ItemDelete.vue
    │   │   │   └── TagsInput.vue
    │   │   ├── Pagination
    │   │   │   ├── Next.vue
    │   │   │   ├── Last.vue
    │   │   │   ├── First.vue
    │   │   │   ├── Prev.vue
    │   │   │   ├── Item.vue
    │   │   │   ├── List.vue
    │   │   │   └── Ellipsis.vue
    │   │   ├── Accordion
    │   │   │   ├── Header.vue
    │   │   │   ├── Item.vue
    │   │   │   └── Content.vue
    │   │   ├── Command
    │   │   │   ├── Separator.vue
    │   │   │   ├── Dialog.vue
    │   │   │   ├── Empty.vue
    │   │   │   ├── Cancel.vue
    │   │   │   ├── Shortcut.vue
    │   │   │   ├── Command.vue
    │   │   │   ├── Label.vue
    │   │   │   ├── Group.vue
    │   │   │   ├── List.vue
    │   │   │   └── Input.vue
    │   │   ├── Card
    │   │   │   ├── Footer.vue
    │   │   │   ├── Header.vue
    │   │   │   ├── Content.vue
    │   │   │   ├── Description.vue
    │   │   │   └── Title.vue
    │   │   ├── Container.vue
    │   │   ├── List
    │   │   │   ├── List.vue
    │   │   │   ├── Content.vue
    │   │   │   ├── Title.vue
    │   │   │   ├── Subtitle.vue
    │   │   │   └── Item.vue
    │   │   ├── Progress
    │   │   │   ├── Indicator.vue
    │   │   │   └── Progress.vue
    │   │   ├── RetroGrid.vue
    │   │   ├── Slider
    │   │   │   ├── Range.vue
    │   │   │   ├── Track.vue
    │   │   │   └── Thumb.vue
    │   │   ├── Separator.vue
    │   │   ├── Switch
    │   │   │   ├── Thumb.vue
    │   │   │   └── Switch.vue
    │   │   ├── GradientDivider.vue
    │   │   ├── NumberField
    │   │   │   ├── Input.vue
    │   │   │   ├── Decrement.vue
    │   │   │   └── Increment.vue
    │   │   ├── Avatar
    │   │   │   ├── Image.vue
    │   │   │   └── Fallback.vue
    │   │   ├── PinInput
    │   │   │   └── PinInputInput.vue
    │   │   ├── Alert
    │   │   │   ├── Title.vue
    │   │   │   └── Description.vue
    │   │   ├── RadioGroup
    │   │   │   ├── Indicator.vue
    │   │   │   ├── RadioGroup.vue
    │   │   │   └── Item.vue
    │   │   ├── Label.vue
    │   │   ├── Skeleton.vue
    │   │   ├── ToggleGroup
    │   │   │   └── ToggleGroup.vue
    │   │   ├── Splitter
    │   │   │   ├── Panel.vue
    │   │   │   └── Splitter.vue
    │   │   ├── Navbar.vue
    │   │   ├── Textarea.vue
    │   │   ├── Checkbox
    │   │   │   └── Indicator.vue
    │   │   ├── Chart
    │   │   │   └── Tooltip.vue
    │   │   └── Input.vue
    │   ├── content
    │   │   └── prose
    │   │   │   └── ProseTable.vue
    │   └── Docs
    │   │   └── PageHeader.vue
    ├── layouts
    │   └── blank.vue
    ├── app.vue
    ├── utils
    │   └── chart.ts
    ├── pages
    │   └── index.vue
    ├── plugins
    │   └── datatables.client.ts
    └── composables
    │   ├── useFormField.ts
    │   └── useShortcuts.ts
├── tsconfig.json
├── .husky
    └── pre-commit
├── Dockerfile
├── compose.yml
├── .github
    └── dependabot.yml
├── ui-thing.config.ts
├── .prettierrc
├── eslint.config.mjs
└── LICENSE.md


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


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


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


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icon.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/favicon.ico


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


--------------------------------------------------------------------------------
/public/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/favicon.ico


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/MenuSubItem.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <li>
3 |     <slot />
4 |   </li>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/public/icons/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/pwa-192x192.png


--------------------------------------------------------------------------------
/public/icons/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/pwa-512x512.png


--------------------------------------------------------------------------------
/public/icons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/favicon-16x16.png


--------------------------------------------------------------------------------
/public/icons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/favicon-32x32.png


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


--------------------------------------------------------------------------------
/public/icons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/icons/pwa-maskable-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/pwa-maskable-192x192.png


--------------------------------------------------------------------------------
/public/icons/pwa-maskable-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/ui-doc-starter/HEAD/public/icons/pwa-maskable-512x512.png


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


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:20.0-alpine
 2 | 
 3 | WORKDIR /app
 4 | 
 5 | COPY package*.json ./
 6 | 
 7 | RUN npm install
 8 | 
 9 | COPY . .
10 | 
11 | RUN npm run build
12 | 
13 | CMD [ "node", ".output/server/index.mjs" ]


--------------------------------------------------------------------------------
/compose.yml:
--------------------------------------------------------------------------------
 1 | services:
 2 |   nuxt-app:
 3 |     image: nuxt-app
 4 |     build: .
 5 |     container_name: nuxt-app
 6 |     ports:
 7 |       - "3030:3000"
 8 |     environment:
 9 |       - SITE_URL=${SITE_URL:-http://localhost:3030}
10 |       - NODE_ENV=production
11 | 


--------------------------------------------------------------------------------
/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 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "mt-4 text-sm text-muted-foreground",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 [&:has([role=checkbox])]:pr-0",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/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: "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 |     schedule:
10 |       interval: "weekly"
11 |       day: "sunday"
12 |       time: "06:00"
13 |       timezone: "America/Jamaica"
14 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "rotate-45 border bg-muted",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "whitespace-nowrap p-4 align-middle text-sm text-foreground",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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-sm text-muted-foreground" });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/app/utils/chart.ts:
--------------------------------------------------------------------------------
 1 | export function defaultColors(count: number = 3) {
 2 |   const quotient = Math.floor(count / 2);
 3 |   const remainder = count % 2;
 4 | 
 5 |   const primaryCount = quotient + remainder;
 6 |   const secondaryCount = quotient;
 7 |   return [
 8 |     ...Array.from(Array(primaryCount).keys()).map(
 9 |       (i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`
10 |     ),
11 |     ...Array.from(Array(secondaryCount).keys()).map(
12 |       (i) => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`
13 |     ),
14 |   ];
15 | }
16 | 


--------------------------------------------------------------------------------
/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: "px-2 py-1.5 pl-9 text-sm font-medium text-muted-foreground",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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: "ml-auto text-xs tracking-widest text-muted-foreground",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Collapsible/Collapsible.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CollapsibleRoot v-slot="slotProps" v-bind="forwarded">
 3 |     <slot v-bind="slotProps" />
 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "-mx-1 my-1 h-px bg-border",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div data-sidebar="footer" :class="sideBarFooterStyles({ class: props.class })">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarFooterStyles = tv({
10 |     base: "flex flex-col gap-2 p-2",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div data-sidebar="header" :class="sideBarHeaderStyles({ class: props.class })">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarHeaderStyles = tv({
10 |     base: "flex flex-col gap-2 p-2",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul data-sidebar="menu" :class="sideBarMenuStyles({ class: props.class })">
 3 |     <slot />
 4 |   </ul>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarMenuStyles = tv({
10 |     base: "flex w-full min-w-0 flex-col gap-1",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/app/components/Docs/PageHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="not-prose">
 3 |     <p v-if="dir" class="mb-2 font-medium capitalize text-primary 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/MenuItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li data-sidebar="menu-item" :class="sideBarMenuItemStyles({ class: props.class })">
 3 |     <slot />
 4 |   </li>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarMenuItemStyles = tv({
10 |     base: "group/menu-item relative",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div data-sidebar="group" :class="sideBarGroupStyles({ class: props.class })">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarGroupStyles = tv({
10 |     base: "relative flex w-full min-w-0 flex-col p-2",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/GroupContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div data-sidebar="group-content" :class="sideBarGroupContentStyles({ class: props.class })">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarGroupContentStyles = tv({
10 |     base: "w-full text-sm",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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: "-mx-1 h-px bg-border",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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: "border bg-muted",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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: "-mx-1 my-1 h-px bg-muted",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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: "-mx-1 my-1 h-px bg-border",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiSeparator data-sidebar="separator" :class="sideBarSeparatorStyles({ class: props.class })">
 3 |     <slot />
 4 |   </UiSeparator>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 |   import type { HTMLAttributes } from "vue";
 9 | 
10 |   export const sideBarSeparatorStyles = tv({
11 |     base: "bg-sidebar-border mx-2 w-auto",
12 |   });
13 | </script>
14 | 
15 | <script setup lang="ts">
16 |   const props = defineProps<{
17 |     /**
18 |      * Additional classes to apply to the parent element.
19 |      */
20 |     class?: HTMLAttributes["class"];
21 |   }>();
22 | </script>
23 | 


--------------------------------------------------------------------------------
/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: "max-h-[300px] w-full overflow-y-auto rounded-md border bg-popover px-4 py-2",
16 |   });
17 | </script>
18 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "-mx-1 my-1 h-px bg-border",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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="h-4 w-4 text-muted-foreground/70" />
 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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-sm text-muted-foreground",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div data-sidebar="content" :class="sideBarContentStyles({ class: props.class })">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarContentStyles = tv({
10 |     base: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the sidebar content.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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: "size-full grow rounded-md bg-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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]:border-transparent data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "h-full w-full flex-1 rounded-full bg-primary transition-all",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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="inset-0 -ml-[50%] animate-grid 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="absolute inset-0 bg-gradient-to-t from-background to-transparent to-90%" />
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/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: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "ml-auto text-xs tracking-widest text-muted-foreground",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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-lg font-semibold text-foreground",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiInput v-model="model" data-sidebar="input" :class="sideBarInputStyles({ class: props.class })">
 3 |     <slot />
 4 |   </UiInput>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 |   import type { HTMLAttributes } from "vue";
 9 | 
10 |   export const sideBarInputStyles = tv({
11 |     base: "border-sidebar-input bg-sidebar focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
12 |   });
13 | </script>
14 | <script setup lang="ts">
15 |   const props = defineProps<{
16 |     /**
17 |      * Additional classes to apply to the parent element.
18 |      */
19 |     class?: HTMLAttributes["class"];
20 |   }>();
21 | 
22 |   const model = defineModel<any>();
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/MenuSub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul data-sidebar="menu-badge" :class="sideBarMenuSubStyles({ class: props.class })">
 3 |     <slot />
 4 |   </ul>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 |   import type { HTMLAttributes } from "vue";
 9 | 
10 |   export const sideBarMenuSubStyles = tv({
11 |     base: [
12 |       "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
13 |       "group-data-[collapsible=icon]:hidden",
14 |     ],
15 |   });
16 | </script>
17 | 
18 | <script setup lang="ts">
19 |   const props = defineProps<{
20 |     /**
21 |      * Additional classes to apply to the parent element.
22 |      */
23 |     class?: HTMLAttributes["class"];
24 |   }>();
25 | </script>
26 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 gap-2 sm:flex-row sm:justify-end sm:space-x-2",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/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-xl font-semibold leading-none tracking-tight md:text-lg",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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: "rotate-45 border bg-muted",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/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: "shrink-0 bg-border",
17 |     variants: {
18 |       orientation: {
19 |         horizontal: "h-[1px] w-full",
20 |         vertical: "h-full w-[1px]",
21 |       },
22 |     },
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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-sm text-muted-foreground",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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: "flex items-center justify-center rounded bg-transparent p-1 opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",
18 |   });
19 | </script>
20 | 


--------------------------------------------------------------------------------
/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-base text-muted-foreground md:text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 
24 |   defineOgImageComponent("Docs", {
25 |     title: page.value?.title,
26 |     description: page.value?.description,
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "relative grow overflow-hidden rounded-full bg-secondary data-[orientation=horizontal]:h-2 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-2",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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-sm text-muted-foreground",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "h-full w-full grow bg-transparent text-center text-base placeholder:text-muted-foreground/80 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/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: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
21 |     variants: {
22 |       inset: { true: "pl-8" },
23 |     },
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/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-sm text-muted-foreground",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/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: "h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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-sm text-muted-foreground",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/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: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/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: "overflow-hidden p-1 text-foreground",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Inset.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main :class="sideBarInsetStyles({ class: props.class })">
 3 |     <slot />
 4 |   </main>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarInsetStyles = tv({
10 |     base: "relative flex min-h-svh flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
11 |   });
12 | </script>
13 | <script setup lang="ts">
14 |   const props = defineProps<{
15 |     /**
16 |      * Additional classes to apply to the parent element.
17 |      */
18 |     class?: HTMLAttributes["class"];
19 |   }>();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/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: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "h-4 w-4 shrink-0 text-muted-foreground opacity-70",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/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: "inline-flex h-6 shrink-0 items-center gap-1.5 rounded bg-primary pl-2 pr-1 leading-none text-primary-foreground sm:text-sm",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Drawer/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive v-bind="forwarded" :class="drawerFooterStyles({ class: props.class })">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 |   import { reactiveOmit } from "@vueuse/core";
 9 |   import { Primitive, useForwardProps } from "radix-vue";
10 |   import type { PrimitiveProps } from "radix-vue";
11 | 
12 |   export const drawerFooterStyles = tv({
13 |     base: "mt-auto flex flex-col gap-2 p-4",
14 |   });
15 | 
16 |   export type DrawerHeaderProps = PrimitiveProps & {
17 |     /**
18 |      * Classes to add to the parent.
19 |      */
20 |     class?: any;
21 |   };
22 | </script>
23 | 
24 | <script lang="ts" setup>
25 |   const props = withDefaults(defineProps<DrawerHeaderProps>(), {
26 |     as: "div",
27 |   });
28 |   const forwarded = useForwardProps(reactiveOmit(props, ["class"]));
29 | </script>
30 | 


--------------------------------------------------------------------------------
/app/components/Ui/Drawer/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive v-bind="forwarded" :class="drawerHeaderStyles({ class: props.class })">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 |   import { reactiveOmit } from "@vueuse/core";
 9 |   import { Primitive, useForwardProps } from "radix-vue";
10 |   import type { PrimitiveProps } from "radix-vue";
11 | 
12 |   export const drawerHeaderStyles = tv({
13 |     base: "grid gap-1.5 p-4 text-center sm:text-left",
14 |   });
15 | 
16 |   export type DrawerHeaderProps = PrimitiveProps & {
17 |     /**
18 |      * Classes to add to the header.
19 |      */
20 |     class?: any;
21 |   };
22 | </script>
23 | <script lang="ts" setup>
24 |   const props = withDefaults(defineProps<DrawerHeaderProps>(), {
25 |     as: "div",
26 |   });
27 |   const forwarded = useForwardProps(reactiveOmit(props, ["class"]));
28 | </script>
29 | 


--------------------------------------------------------------------------------
/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: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",
24 |     variants: {
25 |       pill: {
26 |         true: "bg-muted",
27 |         false: "",
28 |       },
29 |     },
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/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: "inline-flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/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: "flex items-center justify-center rounded bg-transparent opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Tooltip/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiTooltipProvider v-bind="props">
 3 |     <TooltipRoot v-slot="slotProps" v-bind="{ ...forwarded, ...$attrs }">
 4 |       <slot v-bind="slotProps">
 5 |         <slot v-bind="slotProps" name="trigger" />
 6 |         <slot v-bind="slotProps" 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 | 


--------------------------------------------------------------------------------
/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: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/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" class="text-muted-foreground">
 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 | 


--------------------------------------------------------------------------------
/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: "relative h-3 w-full overflow-hidden rounded-full bg-secondary",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/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: "animate-pulse rounded-md bg-muted",
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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none 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",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/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: "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 focus-visible:ring-ring 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 | 


--------------------------------------------------------------------------------
/app/components/Ui/NavigationMenu/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavigationMenuIndicator v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot />
 4 |     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border 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: "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/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: "relative flex-1 rounded-full bg-border",
26 |     variants: {
27 |       orientation: {
28 |         vertical: "flex-1",
29 |         horizontal: "",
30 |       },
31 |     },
32 |   });
33 | </script>
34 | 


--------------------------------------------------------------------------------
/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: "flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 leading-none transition focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/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: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/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: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
24 |     variants: {
25 |       inset: { true: "pl-8" },
26 |     },
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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="ml-auto font-normal text-muted-foreground/80">{{ 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: "flex w-full items-center justify-between text-left text-sm font-medium tracking-tight text-foreground hover:cursor-pointer",
25 |     variants: {
26 |       error: {
27 |         true: "text-destructive",
28 |       },
29 |     },
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/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="h-full w-full rounded-md bg-primary" />
 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 { reactiveOmit } from "@vueuse/core";
 9 |   import { Primitive, useForwardProps } 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 = useForwardProps(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 | 


--------------------------------------------------------------------------------
/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 flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/content/1.getting-started/2.usage.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Usage"
 3 | description: "Learn how you can make the UI Doc starter your own"
 4 | ---
 5 | 
 6 | If you already know how [Nuxt Content](https://content.nuxt.com/) works, you can skip this section. Just clone the repository and start writing your documentation.
 7 | 
 8 | ## Clone the repository
 9 | 
10 | You can use a package like [giget](https://unjs.io/packages/giget) to clone the repository
11 | 
12 | ```bash [Terminal]
13 | npx --yes giget@latest gh:BayBreezy/ui-doc-starter docs --install
14 | ```
15 | 
16 | After that just start the development server
17 | 
18 | ```bash [Terminal]
19 | npm run dev
20 | ```
21 | 
22 | ## Docker
23 | 
24 | If you are a fan of Docker you can customize the `Dockerfile` and `compose.yml` to your liking.
25 | 
26 | ```dockerfile [Dockerfile]
27 | FROM node:20.0-alpine
28 | 
29 | WORKDIR /app
30 | 
31 | COPY package*.json ./
32 | 
33 | RUN npm install
34 | 
35 | COPY . .
36 | 
37 | ENV SITE_URL=http://localhost:3030
38 | 
39 | RUN npm run build
40 | ```
41 | 


--------------------------------------------------------------------------------
/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: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
15 |   });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/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: "absolute right-2 top-2 inline-flex items-center justify-center rounded-md p-1 text-foreground/50 opacity-50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus-visible:ring-ring group-hover:opacity-100",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/MenuBadge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div data-sidebar="menu-badge" :class="sideBarMenuBadgeStyles({ class: props.class })">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | <script lang="ts">
 7 |   import type { HTMLAttributes } from "vue";
 8 | 
 9 |   export const sideBarMenuBadgeStyles = tv({
10 |     base: [
11 |       "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
12 |       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
13 |       "peer-data-[size=sm]/menu-button:top-1",
14 |       "peer-data-[size=default]/menu-button:top-1.5",
15 |       "peer-data-[size=lg]/menu-button:top-2.5",
16 |       "group-data-[collapsible=icon]:hidden",
17 |     ],
18 |   });
19 | </script>
20 | 
21 | <script setup lang="ts">
22 |   const props = defineProps<{
23 |     /**
24 |      * Additional classes to apply to the parent element.
25 |      */
26 |     class?: HTMLAttributes["class"];
27 |   }>();
28 | </script>
29 | 


--------------------------------------------------------------------------------
/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: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-3 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:ring-1 data-[highlighted]:ring-border",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/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 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "left-0 top-0 w-full 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 md:absolute md:w-auto",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/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: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/GroupAction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive
 3 |     data-sidebar="group-action"
 4 |     :as="as"
 5 |     :as-child="asChild"
 6 |     :class="sideBarGroupActionStyles({ class: props.class })"
 7 |   >
 8 |     <slot />
 9 |   </Primitive>
10 | </template>
11 | <script lang="ts">
12 |   import { Primitive } from "radix-vue";
13 |   import type { PrimitiveProps } from "radix-vue";
14 |   import type { HTMLAttributes } from "vue";
15 | 
16 |   export const sideBarGroupActionStyles = tv({
17 |     base: "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform after:absolute after:-inset-2 focus-visible:ring-2 group-data-[collapsible=icon]:hidden after:md:hidden [&>svg]:size-4 [&>svg]:shrink-0",
18 |   });
19 | </script>
20 | <script setup lang="ts">
21 |   const props = defineProps<
22 |     PrimitiveProps & {
23 |       /**
24 |        * Additional classes to apply to the parent element.
25 |        */
26 |       class?: HTMLAttributes["class"];
27 |     }
28 |   >();
29 | </script>
30 | 


--------------------------------------------------------------------------------
/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: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
31 |   });
32 | </script>
33 | 


--------------------------------------------------------------------------------
/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 |             class="mx-auto my-5 h-2 w-[60px] shrink-0 cursor-grab rounded-full bg-muted active:cursor-grabbing"
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: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/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: "flex h-11 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
35 |   });
36 | </script>
37 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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: "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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/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: "line-clamp-1 flex h-10 w-full items-center justify-between truncate rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/GroupLabel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive
 3 |     data-sidebar="group-label"
 4 |     :as="as"
 5 |     :as-child="asChild"
 6 |     :class="sideBarGroupLabelStyles({ class: props.class })"
 7 |   >
 8 |     <slot>{{ props.label }}</slot>
 9 |   </Primitive>
10 | </template>
11 | <script lang="ts">
12 |   import { Primitive } from "radix-vue";
13 |   import type { PrimitiveProps } from "radix-vue";
14 |   import type { HTMLAttributes } from "vue";
15 | 
16 |   export const sideBarGroupLabelStyles = tv({
17 |     base: "text-sidebar-foreground/50 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
18 |   });
19 | </script>
20 | <script setup lang="ts">
21 |   const props = defineProps<
22 |     PrimitiveProps & {
23 |       /**
24 |        * Additional classes to apply to the parent element.
25 |        */
26 |       class?: HTMLAttributes["class"];
27 |       /**
28 |        * The label for the group.
29 |        */
30 |       label?: string;
31 |     }
32 |   >();
33 | </script>
34 | 


--------------------------------------------------------------------------------
/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: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 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",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/app/components/Ui/Chart/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiCard class="text-sm">
 3 |     <UiCardHeader v-if="title" class="border-b p-3">
 4 |       <UiCardTitle>
 5 |         {{ title }}
 6 |       </UiCardTitle>
 7 |     </UiCardHeader>
 8 |     <UiCardContent class="flex min-w-[180px] flex-col gap-1 !p-3">
 9 |       <div v-for="(item, key) in data" :key="key" class="flex justify-between">
10 |         <div class="flex items-center">
11 |           <span class="mr-2 h-2.5 w-2.5">
12 |             <svg width="100%" height="100%" viewBox="0 0 30 30">
13 |               <path
14 |                 d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
15 |                 :stroke="item.color"
16 |                 :fill="item.color"
17 |                 stroke-width="1"
18 |               />
19 |             </svg>
20 |           </span>
21 |           <span>{{ item.name }}</span>
22 |         </div>
23 |         <span class="ml-4 font-semibold">{{ item.value }}</span>
24 |       </div>
25 |     </UiCardContent>
26 |   </UiCard>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 |   defineProps<{
31 |     title?: string;
32 |     data: {
33 |       name: string;
34 |       color: string;
35 |       value: any;
36 |     }[];
37 |   }>();
38 | </script>
39 | 


--------------------------------------------------------------------------------
/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: "cursor-pointer outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-primary/10",
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 | 


--------------------------------------------------------------------------------
/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: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
33 |   });
34 | </script>
35 | 


--------------------------------------------------------------------------------
/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: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 pl-9 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/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 h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark] sm:text-sm",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/app/components/Ui/Sidebar/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiButton
 3 |     :title="label"
 4 |     data-sidebar="trigger"
 5 |     variant="ghost"
 6 |     size="icon"
 7 |     :class="sideBarTriggerStyles({ class: props.class })"
 8 |     @click="toggleSidebar"
 9 |   >
10 |     <slot v-bind="{ state }">
11 |       <Icon v-if="icon" :name="icon" />
12 |       <span class="sr-only">{{ label }}</span>
13 |     </slot>
14 |   </UiButton>
15 | </template>
16 | 
17 | <script lang="ts">
18 |   import type { HTMLAttributes } from "vue";
19 | 
20 |   export const sideBarTriggerStyles = tv({
21 |     base: "size-7",
22 |   });
23 | </script>
24 | 
25 | <script setup lang="ts">
26 |   const props = withDefaults(
27 |     defineProps<{
28 |       /**
29 |        * The icon to display in the trigger.
30 |        * @default "lucide:panel-left"
31 |        */
32 |       icon?: string;
33 |       /**
34 |        * Additional classes to apply to the parent element.
35 |        */
36 |       class?: HTMLAttributes["class"];
37 |       /**
38 |        * The label for the trigger.
39 |        * @default "Toggle Sidebar"
40 |        */
41 |       label?: string;
42 |     }>(),
43 |     {
44 |       icon: "lucide:panel-left",
45 |       label: "Toggle Sidebar",
46 |     }
47 |   );
48 | 
49 |   const { toggleSidebar, state } = useSidebar();
50 | </script>
51 | 


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