@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/index.ts

@@ -0,0 +1,179 @@
+// Auto-generated — DO NOT EDIT MANUALLY
+
+import './index.css'
+
+// Default shadcn
+export * from './shadcn/breadcrumb';
+export * from './shadcn/accordion'
+
+export { default as InputOTP } from './ui/InputOTP.vue';
+export { default as InputOTPGroup } from './ui/InputOTPGroup.vue';
+export { default as InputOTPSeparator } from './ui/InputOTPSeparator.vue';
+export { default as InputOTPSlot } from './ui/InputOTPSlot.vue';
+export { default as PopoverContent } from './ui/PopoverContent.vue';
+export { default as PopoverTrigger } from './ui/PopoverTrigger.vue';
+export { default as SelectContent } from './ui/SelectContent.vue';
+export { default as SelectGroup } from './ui/SelectGroup.vue';
+export { default as SelectItem } from './ui/SelectItem.vue';
+export { default as SelectLabel } from './ui/SelectLabel.vue';
+export { default as SelectSeparator } from './ui/SelectSeparator.vue';
+export { default as SelectTrigger } from './ui/SelectTrigger.vue';
+export { default as SelectValue } from './ui/SelectValue.vue';
+export { default as SheetContent } from './ui/SheetContent.vue';
+export { default as SheetDescription } from './ui/SheetDescription.vue';
+export { default as SheetHeader } from './ui/SheetHeader.vue';
+export { default as SheetTitle } from './ui/SheetTitle.vue';
+export { default as AccordionContent } from './ui/accordion-content.vue';
+export { default as AccordionItem } from './ui/accordion-item.vue';
+export { default as AccordionTrigger } from './ui/accordion-trigger.vue';
+export { default as Accordion } from './ui/accordion.vue';
+export { default as AlertActions } from './ui/alert-actions.vue';
+export { default as AlertDescription } from './ui/alert-description.vue';
+export { default as AlertTitle } from './ui/alert-title.vue';
+export { default as Alert } from './ui/alert.vue';
+export { default as AvatarFallback } from './ui/avatar-fallback.vue';
+export { default as AvatarGroup } from './ui/avatar-group.vue';
+export { default as AvatarImage } from './ui/avatar-image.vue';
+export { default as Avatar } from './ui/avatar.vue';
+export { default as Badge } from './ui/badge.vue';
+export { default as BreadcrumbItem } from './ui/breadcrumb-item.vue';
+export { default as BreadcrumbSeparator } from './ui/breadcrumb-separator.vue';
+export { default as Breadcrumb } from './ui/breadcrumb.vue';
+export { default as Button } from './ui/button.vue';
+export { default as CardContent } from './ui/card-content.vue';
+export { default as CardDescription } from './ui/card-description.vue';
+export { default as CardFooter } from './ui/card-footer.vue';
+export { default as CardHeader } from './ui/card-header.vue';
+export { default as CardTitle } from './ui/card-title.vue';
+export { default as Card } from './ui/card.vue';
+export { default as CategoryBreakdownMetric } from './ui/category-breakdown-metric.vue';
+export { default as Checkbox } from './ui/checkbox.vue';
+export { default as DialogBody } from './ui/dialog-body.vue';
+export { default as DialogClose } from './ui/dialog-close.vue';
+export { default as DialogContent } from './ui/dialog-content.vue';
+export { default as DialogDescription } from './ui/dialog-description.vue';
+export { default as DialogFooter } from './ui/dialog-footer.vue';
+export { default as DialogHeader } from './ui/dialog-header.vue';
+export { default as DialogOverlay } from './ui/dialog-overlay.vue';
+export { default as DialogPortal } from './ui/dialog-portal.vue';
+export { default as DialogTitle } from './ui/dialog-title.vue';
+export { default as DialogTrigger } from './ui/dialog-trigger.vue';
+export { default as Dialog } from './ui/dialog.vue';
+export { default as DismissibleBadgesDemo } from './ui/dismissible-badges-demo.vue';
+export { default as DrawerContent } from './ui/drawer-content.vue';
+export { default as DrawerDescription } from './ui/drawer-description.vue';
+export { default as DrawerFooter } from './ui/drawer-footer.vue';
+export { default as DrawerHeader } from './ui/drawer-header.vue';
+export { default as DrawerTitle } from './ui/drawer-title.vue';
+export { default as DrawerTrigger } from './ui/drawer-trigger.vue';
+export { default as Drawer } from './ui/drawer.vue';
+export { default as DropdownMenuCheckboxItem } from './ui/dropdown-menu-checkbox-item.vue';
+export { default as DropdownMenuContent } from './ui/dropdown-menu-content.vue';
+export { default as DropdownMenuGroup } from './ui/dropdown-menu-group.vue';
+export { default as DropdownMenuItem } from './ui/dropdown-menu-item.vue';
+export { default as DropdownMenuLabel } from './ui/dropdown-menu-label.vue';
+export { default as DropdownMenuPortal } from './ui/dropdown-menu-portal.vue';
+export { default as DropdownMenuRadioGroup } from './ui/dropdown-menu-radio-group.vue';
+export { default as DropdownMenuRadioItem } from './ui/dropdown-menu-radio-item.vue';
+export { default as DropdownMenuSeparator } from './ui/dropdown-menu-separator.vue';
+export { default as DropdownMenuShortcut } from './ui/dropdown-menu-shortcut.vue';
+export { default as DropdownMenuSubContent } from './ui/dropdown-menu-sub-content.vue';
+export { default as DropdownMenuSubTrigger } from './ui/dropdown-menu-sub-trigger.vue';
+export { default as DropdownMenuSub } from './ui/dropdown-menu-sub.vue';
+export { default as DropdownMenuTrigger } from './ui/dropdown-menu-trigger.vue';
+export { default as DropdownMenu } from './ui/dropdown-menu.vue';
+export { default as GroupedAvatar } from './ui/grouped-avatar.vue';
+export { default as Accessibility } from './ui/icons/Accessibility.vue';
+export { default as AlignLeft } from './ui/icons/AlignLeft.vue';
+export { default as ArrowDown } from './ui/icons/ArrowDown.vue';
+export { default as ArrowUp } from './ui/icons/ArrowUp.vue';
+export { default as ArrowUpDown } from './ui/icons/ArrowUpDown.vue';
+export { default as BookOpen } from './ui/icons/BookOpen.vue';
+export { default as Calendar } from './ui/icons/Calendar.vue';
+export { default as Check } from './ui/icons/Check.vue';
+export { default as ChevronRight } from './ui/icons/ChevronRight.vue';
+export { default as Circle } from './ui/icons/Circle.vue';
+export { default as Copy } from './ui/icons/Copy.vue';
+export { default as Dot } from './ui/icons/Dot.vue';
+export { default as Edit } from './ui/icons/Edit.vue';
+export { default as FileText } from './ui/icons/FileText.vue';
+export { default as Folder } from './ui/icons/Folder.vue';
+export { default as FolderOpen } from './ui/icons/FolderOpen.vue';
+export { default as Hash } from './ui/icons/Hash.vue';
+export { default as Home } from './ui/icons/Home.vue';
+export { default as Minus } from './ui/icons/Minus.vue';
+export { default as MoreHorizontal } from './ui/icons/MoreHorizontal.vue';
+export { default as Settings } from './ui/icons/Settings.vue';
+export { default as Slash } from './ui/icons/Slash.vue';
+export { default as Trash2 } from './ui/icons/Trash2.vue';
+export { default as Type } from './ui/icons/Type.vue';
+export { default as User } from './ui/icons/User.vue';
+export { default as InputOtp } from './ui/input-otp.vue';
+export { default as Input } from './ui/input.vue';
+export { default as Label } from './ui/label.vue';
+export { default as Pagination } from './ui/pagination.vue';
+export { default as Popover } from './ui/popover.vue';
+export { default as Progress } from './ui/progress.vue';
+export { default as RadioGroupItem } from './ui/radio-group-item.vue';
+export { default as RadioGroup } from './ui/radio-group.vue';
+export { default as ScrollableTabsList } from './ui/scrollable-tabs-list.vue';
+export { default as SelectMultiple } from './ui/select-multiple.vue';
+export { default as Select } from './ui/select.vue';
+export { default as Separator } from './ui/separator.vue';
+export { default as Sheet } from './ui/sheet.vue';
+export { default as BaseSidebar } from './ui/sidebar/BaseSidebar.vue';
+export { default as BasicSearch } from './ui/sidebar/BasicSearch.vue';
+export { default as ResponsiveSearch } from './ui/sidebar/ResponsiveSearch.vue';
+export { default as Sidebar } from './ui/sidebar/Sidebar.vue';
+export { default as SidebarCollapseButton } from './ui/sidebar/SidebarCollapseButton.vue';
+export { default as SidebarContent } from './ui/sidebar/SidebarContent.vue';
+export { default as SidebarDescription } from './ui/sidebar/SidebarDescription.vue';
+export { default as SidebarExpandButton } from './ui/sidebar/SidebarExpandButton.vue';
+export { default as SidebarFooter } from './ui/sidebar/SidebarFooter.vue';
+export { default as SidebarGroup } from './ui/sidebar/SidebarGroup.vue';
+export { default as SidebarGroupContent } from './ui/sidebar/SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './ui/sidebar/SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './ui/sidebar/SidebarHeader.vue';
+export { default as SidebarInset } from './ui/sidebar/SidebarInset.vue';
+export { default as SidebarMenu } from './ui/sidebar/SidebarMenu.vue';
+export { default as SidebarMenuBadge } from './ui/sidebar/SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './ui/sidebar/SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './ui/sidebar/SidebarMenuItem.vue';
+export { default as SidebarMenuSub } from './ui/sidebar/SidebarMenuSub.vue';
+export { default as SidebarMenuSubContent } from './ui/sidebar/SidebarMenuSubContent.vue';
+export { default as SidebarMenuSubItem } from './ui/sidebar/SidebarMenuSubItem.vue';
+export { default as SidebarMenuSubTrigger } from './ui/sidebar/SidebarMenuSubTrigger.vue';
+export { default as SidebarProvider } from './ui/sidebar/SidebarProvider.vue';
+export { default as SidebarScrollArea } from './ui/sidebar/SidebarScrollArea.vue';
+export { default as SidebarSection } from './ui/sidebar/SidebarSection.vue';
+export { default as SidebarSeparator } from './ui/sidebar/SidebarSeparator.vue';
+export { default as SidebarShortcut } from './ui/sidebar/SidebarShortcut.vue';
+export { default as SidebarTitle } from './ui/sidebar/SidebarTitle.vue';
+export { default as SidebarTrigger } from './ui/sidebar/SidebarTrigger.vue';
+export { default as Wrapper } from './ui/sidebar/Wrapper.vue';
+// export { default as Sidebar } from './ui/sidebar.vue';
+export { default as Skeleton } from './ui/skeleton.vue';
+export { default as Slider } from './ui/slider.vue';
+export { default as Sonner } from './ui/sonner.vue';
+export { default as Switch } from './ui/switch.vue';
+export { default as TabContent } from './ui/tab-content.vue';
+export { default as TabList } from './ui/tab-list.vue';
+export { default as TabPanel } from './ui/tab-panel.vue';
+export { default as TabTrigger } from './ui/tab-trigger.vue';
+export { default as Tab } from './ui/tab.vue';
+export { default as TableBody } from './ui/table-body.vue';
+export { default as TableCaption } from './ui/table-caption.vue';
+export { default as TableCell } from './ui/table-cell.vue';
+export { default as TableFooter } from './ui/table-footer.vue';
+export { default as TableHeader } from './ui/table-header.vue';
+export { default as TableRow } from './ui/table-row.vue';
+export { default as Table } from './ui/table.vue';
+export { default as Tabs } from './ui/tabs.vue';
+export { default as Textarea } from './ui/textarea.vue';
+export { default as ThreatGauge } from './ui/threat-gauge.vue';
+export { default as Toggle } from './ui/toggle.vue';
+export { default as TooltipContent } from './ui/tooltip-content.vue';
+export { default as TooltipProvider } from './ui/tooltip-provider.vue';
+export { default as TooltipRoot } from './ui/tooltip-root.vue';
+export { default as TooltipTrigger } from './ui/tooltip-trigger.vue';
+export { default as Tooltip } from './ui/tooltip.vue';

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/shadcn/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
+import {
+  AccordionRoot,
+
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot data-slot="accordion" v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/shadcn/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/shadcn/accordion/AccordionItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/shadcn/accordion/AccordionTrigger.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import {
+  AccordionHeader,
+  AccordionTrigger,
+
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/shadcn/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.vue"
+export { default as AccordionContent } from "./AccordionContent.vue"
+export { default as AccordionItem } from "./AccordionItem.vue"
+export { default as AccordionTrigger } from "./AccordionTrigger.vue"

package/src/shadcn/avatar/Avatar.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>

package/src/shadcn/avatar/AvatarFallback.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>

package/src/shadcn/avatar/AvatarImage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
+</template>

package/src/shadcn/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"

package/src/shadcn/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,8 @@
+<template>
+  <nav aria-label="breadcrumb" data-slot="breadcrumb">
+    <slot />
+  </nav>
+</template>
+<script setup lang="ts">
+// No props needed
+</script>

package/src/shadcn/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,9 @@
+<template>
+  <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" class="flex size-9 items-center justify-center">
+    <MoreHorizontal class="size-4" />
+    <span class="sr-only">More</span>
+  </span>
+</template>
+<script setup lang="ts">
+import { MoreHorizontal } from 'lucide-vue-next';
+</script>

package/src/shadcn/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,8 @@
+<template>
+  <li data-slot="breadcrumb-item" class="inline-flex items-center gap-1.5">
+    <slot />
+  </li>
+</template>
+<script setup lang="ts">
+// No props needed
+</script>

package/src/shadcn/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,8 @@
+<template>
+  <a data-slot="breadcrumb-link" class="hover:text-foreground transition-colors">
+    <slot />
+  </a>
+</template>
+<script setup lang="ts">
+// No props needed
+</script>

package/src/shadcn/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,8 @@
+<template>
+  <ol data-slot="breadcrumb-list" class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
+    <slot />
+  </ol>
+</template>
+<script setup lang="ts">
+// No props needed
+</script>

package/src/shadcn/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" class="text-foreground font-normal">
+    <slot />
+  </span>
+</template>
+<script setup lang="ts">
+// No props needed
+</script>

package/src/shadcn/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,8 @@
+<template>
+  <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class="[&>svg]:size-3.5">
+    <slot><ChevronRight class="size-3.5" /></slot>
+  </li>
+</template>
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next';
+</script>

package/src/shadcn/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';

package/src/shadcn/button/Button.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/shadcn/button/index.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/shadcn/calendar/Calendar.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes["class"]; calendarHeaderClass?: HTMLAttributes["class"]; calendarPrevButtonClass?: HTMLAttributes["class"]; calendarNextButtonClass?: HTMLAttributes["class"]; calendarHeaderStyle?: HTMLAttributes["style"] }>()
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid }"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader :class="props.calendarHeaderClass" :style="props.calendarHeaderStyle">
+      <CalendarHeading />
+
+      <div class="flex items-center gap-1">
+  <CalendarPrevButton :class="props.calendarPrevButtonClass" />
+  <CalendarNextButton :class="props.calendarNextButtonClass" />
+      </div>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+
+              class="rounded-md aria-selected:bg-primary aria-selected:text-primary-foreground aria-selected:hover:bg-primary aria-selected:hover:text-primary-foreground aria-selected:focus:bg-primary aria-selected:focus:text-primary-foreground"
+
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

package/src/shadcn/calendar/CalendarCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>

package/src/shadcn/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/shadcn/button'
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>